Will developing in a browser that is zoomed in effect the final design?

Most browsers support this now and I have a large monitor so I was wondering if it mattered or not.

4 answers

This was chosen as the best answer

In my opinion, both responses previous to mine are correct, despite being at opposite ends of the spectrum.

In theory, zooming a page within a browser window only magnifies what you're seeing. So that 200px by 200px box is now 400px tall and wide, and everything else is twice the size as well.

However, not all browsers scale equally. For example, I seem to recall reading that certain browsers (IE, I think it was) will scale everything except text elements styled in pixel heights. (Don't quote me on that; I'm sure that's not entirely accurate.) So in this case, your 200px box is twice the size, but the text is the same.

The difference seems to be that some browsers perform what we would think of as "magnification" while other browsers "scale" the content.

The final answer would seem to be: figure out if it works for you, and if so, do it. However, as a general rule of thumb, I would advise against it unless you can be assured that the browser is performing an accurate "whole-page" magnification.

Answered over 9 years ago by Justin Ryan
  • Foiled by &@#!'n IE again! When will we ever be rid of this menace to web development? (oh well job security) Thank you for the detailed answer Andrew J. Leer over 9 years ago
  • Older versions of IE only scales text and elements with a size specified using em or pt, and not elements and text specified using px. Newer versions scale all elements and all text. Guffa over 9 years ago

Sure it matters. If you have your browser zoomed in as you develop, you will get an altered view of what your site actually looks like. I recommend not having your browser zoomed in as you develop as well as checking multiple browsers in multiple resolutions to make sure that the site is consistent across platforms before you go live.

Remember that browser settings may differ from user to user, but most people leave their browsers at default settings. Also remember that browsers can do a zoom or a text-only zoom and that makes a big difference in how a page will render. Ultimately, you should try to get an idea of who your target audience is so you can best determine how you will serve up your page.

Answered over 9 years ago by Abinadi Ayerdis
Guffa 316

Yes, it matters. How much depends on the browser and your system settings.

Older browsers only changed the font size (em value) for the page, while newer versions zooms all elements. So if you are testing in the latest version, the zooming will make minimal difference.

Scaling text is a bit different from scaling other elements. Due to rounding and kerning, rendering text at the double font size will not result in an exact doubling of the measurements. A text that fits when zoomed might not fit any more at normal size. If you use font smoothing text scales better, so the difference will be less.

Answered over 9 years ago by Guffa

As long as you determine your dimensions explicitly it won't matter.

a 200px by 200px div is still the same, zoomed or not.

So in short...

Developing while zoomed changes your perspective of the design, not the design itself.

Answered over 9 years ago by Derek Adair
  • I don't know, Derek. It depends on the browser, I think. Not all browsers can do a true zooming. Some do text-only. In any case, while I agree that zoomed-in changes perspective only of the design, perspective can be really important in the design process. Depending on how zoomed in he has his browser set, he may be thinking that something is filling the screen, when it won't or that something is much smaller than it is. Abinadi Ayerdis over 9 years ago