3

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

sergdenisov
  • 8,327
  • 9
  • 48
  • 63
erpExpert
  • 142
  • 1
  • 9
  • could you please post screenshots on using browser zoom and using css? this is interesting. – Ashesh May 10 '15 at 14:05
  • possible duplicate of [How to Increase browser zoom level on page load?](http://stackoverflow.com/questions/9441557/how-to-increase-browser-zoom-level-on-page-load) – Sven Tschui May 10 '15 at 14:09
  • you need to apply zoom in page level or element level? – yugi May 10 '15 at 14:09

3 Answers3

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.

Community
  • 1
  • 1
Ashesh
  • 3,499
  • 1
  • 27
  • 44
0

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);.

roydukkey
  • 3,149
  • 2
  • 27
  • 43
-1

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.

AppBroom
  • 34
  • 4