Issue
When on a desktop/laptop, if you zoom in on a website, the text (and entire page) adjusts to fit the screen. However, when you zoom in on mobile, you instead scroll horizontally, and no elements adjust for the new zoom.
Why is this? Is there any way to make mobile browsers mimic the behavior of desktop browsers so that the webpage adjusts to the zoom?
The relevant parts of my <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm also using Bootstrap CSS.
Regular zoom on mobile:
Current behavior on mobile (page is cropped, horizontal scrolling enabled):
Desired behavior on mobile (aka current behavior on desktop). Margins adjust to fit new screen width:
Possible duplicate of HTML - Prevent horizontal scrolling when zooming in on mobile
Solution
The short answer is: probably don't do this, it's terribly inaccessible.
That said, if you want to do this, look into the two viewports described by Viewport concepts - MDN. Basically, you need to modify your component boxes to render based on the size of the visual viewport, not the layout viewport:
When the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.
-- MDN
Answered By - Mark Wiemer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.