zoom an application to 80% by css

问题

We are using an open source application and everything is fine about it. The only thing I dont like about the product is it's layout & text size. If I zoom to 80% (either firefox or chrome browaer) then the application looks perfect. As our end users are not so tech savvy, I want the application to open in 80% zoom mode.

Is there any way this can 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 same as doing view -> zooms -> -- in firefox

回答1:

This is really not possible with CSS and/or JQuery. Manual browser zoom and CSS zoom property both work differently and will produce different results.

source: Changing the browser zoom level

---

Alternative: On page load provide users with a modal window instructing them how to manually Zoom in/out, close it after they have zoomed successfully.

回答2:

For mobile, you may do this with a meta viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=0.8"/>

However for desktops, you may have a look into this polyfill by 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
                });
            }
        }
    };
}

Once you add the polyfill you may run $.cssHooks.zoom.set("body", 0.8);.

回答3:

Have you tried using css transform?

.class{

transform : scale(0.8);

}

This can be used with in HTML conditions which detect browser types and CSS media queries.

来源：https://stackoverflow.com/questions/30151994/zoom-an-application-to-80-by-css