Increase app to 80% css
We are using an open source application and everything is fine. The only thing I don't like about the product is the layout and size of the text. If I zoom to 80% (either firefox or chrome browaer) then the app looks perfect. Since our end users are not that tech savvy, I want the app to open in 80% zoom mode.
Can this be done in css or jQuery.
I tried below
body {
-moz-transform: scale(0.8, 0.8); /* Moz-browsers */
zoom: 0.8; /* Other non-webkit browsers */
zoom: 80%; /* Webkit browsers */
}
but doesn't help ... it's not how to pretend -> zoom -> - in firefox
source to share
This cannot be done with CSS and / or JQuery. Manual browser scaling and the CSS scaling property work differently and will produce different results.
Source: Changing Browser Zoom Level
Alternative: On page load, users are presented with a modal window that tells how to manually zoom in / out, close it after successful zoom.
source to share
For mobile, you can do this with the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=0.8"/>
For desktops, however, you can check out this polyfill from Nemo64 .
$.cssNumber.zoom = true;
if (!("zoom" in document.body.style)) {
$.cssHooks.zoom = {
get: function(elem, computed, extra) {
var value = $(elem).data('zoom');
return value != null ? value : 1;
},
set: function(elem, value) {
var $elem = $(elem);
var size = { // without margin
width: $elem.outerWidth(),
height: $elem.outerWidth()
};
$elem.data('zoom', value);
if (value != 1) {
$elem.css({
transform: 'scale(' + value + ')',
marginLeft: (size.width * value - size.width) / 2,
marginRight: (size.width * value - size.width) / 2,
marginTop: (size.height * value - size.height) / 2,
marginBottom: (size.height * value - size.height) / 2
});
} else {
$elem.css({
transform: null,
margin: null
});
}
}
};
}
After adding the polyfill, you can run $.cssHooks.zoom.set("body", 0.8);
.
source to share