CODEWITHSUNDEEP
cssresponsive-designviewport-units
Zelphir Kaltstahl
Zelphir Kaltstahl

Reputation: 6189

CSS react to mobile Browser Zoom

I was under the impression, that the units vh and vw deal with mobile browser zooming in, but apparently that's not the case and I think I am beginning to understand why. Zooming in does not change the viewport at all, but merely shows the user only a part of the viewport, despite the name viewport. Basically there is a difference between what you can see and the viewport. I don't know if distinguishing those two really makes sense, but that's how it seems to be.

The question is: How else do I "react" in my stylesheet to zoom changes?

For example, I have some html element with a width and it fits on the screen of a mobile phone. Now the user zooms in (doing that two finger gesture, moving the fingers away from each other). The size of the element should stay the same relative to what the user sees, but text should get bigger, because it might be the reason why the user zooms in. Maybe they couldn't read it before or want a link to be bigger, so that they can click more easily on it.

How would I do such a thing?

I've read about @viewport stuff, but it's not really supported yet and also poses the question, when to use which viewport size, how to make it as fluent as when you use vh and vw on a destop browser? Simple limiting "up to so and so much px of width" won't do. Defining a mathematical function for how much the element changes its size relative to what one can see and how much the text size changes would be great, but is probably not possible to have.

Upvotes: 1

Views: 2364

Answers (1)

Prateek Gupta
Prateek Gupta

Reputation: 538

On mobile devices, the text-size-adjust property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.

As this property is non-standard, it must be used prefixed: -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.

Browsers on smartphones don't display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.

Its highly experimental though

Upvotes: 1

Related Questions