1

In web design, is it possible to automatically set a Zoom % for users based on their web browser?

For instance, a website opened in Opera with 100% Zoom may not look the same if it was opened in Chrome at the same 100% Zoom. However, the website at 100% Opera scales identically with Chrome at 125% Zoom. Is there a way to set Zoom views? Am I being confused with view-port?

Mr-Kimbles
  • 83
  • 1
  • 10
  • 7
    Please don't mess with the browser's zoom level. Your user may have a perfectly good reason to use a different zoom level, i.e. he has bad eyes or a greater distance from the screen. Messing with his (the user's) settings may be considered rude. – Mischback Aug 01 '15 at 17:43
  • Possible duplicate http://stackoverflow.com/questions/9441557/how-to-increase-browser-zoom-level-on-page-load. I would suggest searching the web thoroughly before asking. – Lucian Aug 01 '15 at 17:43
  • @Mischback I see. But that level of consideration only assumes that all incoming users will take the time and effort to adjust the zoom level. I have no doubt people have different comfort levels of view distance, but is it not a valid reason to predispose users to the site's standard/intended presentation? Then if the intended view is not suitable they can re-adjust their view. – Mr-Kimbles Aug 01 '15 at 18:40
  • @Mr-Kimbles I think it is one of the biggest challenges in modern web design to build a design that is functional, usable and has the right amount of eye-candy. A design should work _by itsself_, meaning it should work on most of the devices, in landscape and portrait-mode, on TV screens aswell as laptops. A huge challenge, and we're all struggling to get to the _perfect layout_. – Mischback Aug 01 '15 at 18:44
  • @Mischback Ah, I see... I probably shouldn't have been so careless with the alignments of my elements. Why is it that browsers have no standard that makes it easier to present websites? – Mr-Kimbles Aug 01 '15 at 19:04
  • 2
    I assume there is a conspiracy of all browser-vendors with the target to drive all webdesigners into madness. – Mischback Aug 01 '15 at 19:07

2 Answers2

1

Well it's considered not good, but in rare cases that you want to increase the scale of an element you can do something like this:

   .zoom {
        -ms-transform: scale(1.2);
        -ms-transform-origin: 50% 0; /* IE */
        -moz-transform: scale(1.2);
        -moz-transform-origin: 50% 0 0;  /* Mozilla */ 
        -webkit-transform: scale(1.2);
        -webkit-transform-origin: 50% 0 0;  /* Chrome, Safari, Opera */
     }
Robin Carlo Catacutan
  • 11,461
  • 9
  • 48
  • 79
1

Viewport is a way of defining the viewable area (I guess it looks a bit like zooming). But it's a meta tag.

<meta name="viewport" content="width=device-width" />

There is another solution in css (check support or vendor prefixes)

@viewport {
    width: 980px;
    min-zoom: 0.25;
    max-zoom: 5;
    orientation: landscape;
}
Justin McKee
  • 146
  • 6