Question about zooming in browser

HI,

Just interested to know, when someone zooms a browser to say 200 or 300 % what ever the case may be, I noticed that text even though wordwrap-break is on the words can still flow out of the container. Also an element such as video controls.

Is this normal or is there a way around this?

This is what I am looking at? The browser in the image is zoomed to 300%.

That seems like a fairly unrealistic zoom scenario, where elements are so narrow. Individual words don’t normally wrap, but if there’s a situation where there’s not even room for a single, small word, I’d be rethinking the layout. Under the conditions pictured, it would be best to have the design reflow so that containers are stacked vertically. You can do that with media queries, which look at the width of the screen and adjust the layout accordingly.

Thanks,

This is a single column with no floats and no side by side elements (except for the very bottom). Basically what you are seeing are the controls for the html5 video breaking out even though the video fits. The menu can only shrink so much and works fine without the huge zoom and the tables which can also only shrink so much. The tables are set to flow on media screens smaller than the table can fit.

This may only be a Firefox thing which is where these shots are from.

So I am guessing anyone who actually wanted to zoom that large should expect those kinds of errors? I see it a rare case for that to happen anyway. Just something that I happened to look at.

OK, I misinterpreted the image, then. There are ways to optimize zooming effects—particularly by using em measurements in media queries: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

I always like to test my pages with a high zoom setting. But I wonder if your browser is unrealistically narrow in those screen shots. Could you post a link?

For sure it is. I mad the browser as narrow as possible (300px). I just figure you can’t fix every possible problem, maybe I am wrong but how can you really know what will happen with an end user.

http://www.quailrunrv.com/html5layout/templateqr2015.html

Indeed, there are more situation than we can test or plan for, which is why keeping things as simple and flexible as possible is a good approach. I’m not sure, but normally you can’t really zoom like this on small screens around 300px wide. Doing so on a smart phone doesn’t cause things to reflow, but just zoom offscreen, for example. I wouldn’t worry about getting zooming to work perfectly on a desktop screen set so narrow.

1 Like

Thanks that is what I thought, will call that a day and be done with it.

1 Like

@TechnoBear
Hi, This is the last place I had posted an image that I am aware of that is served externally. If this could be edited to onsite storage then I can remove all from where located.

Thanks

Done.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.