Geek Answers Handbook

Viewport meta tag not working for iPhone

My site has a fixed layout size of 1090px. When I use this meta tag:

<meta name="viewport" content="width=device-width, maximum-scale=1">

the page will be loaded with magnification. Not all paths (approximately 300 pixels wide are not displayed).

In addition, you cannot zoom the page far to see it all.

Does width width = device-width not allow this?

So, I tried an initial 0.29 scale that worked great for the iPhone. But when loading the site on the iPad, this would be clearly too small.

How can i fix this?

UPDATE: So I just realized that the width is apparently determined by the height of my page. Safari on the iPhone corresponds to the height in the viewport and does not care about setting the width, nor does it allow you to zoom out to see the entire width. It looks like if the page is taller, you can see more width. The width is just beautiful in the landscape.

+4
source share
1 answer

If your design doesn’t respond, it’s better to target a specific resolution of the device, for example, to a width of 320. I would go to <meta name="viewport" content="width=320">

I also noticed that the content set as the width of the device tends to be split into ios 4 safari. I am afraid ios safari is not a problem - it is an unresponsive design causing the problem.

In addition, if the design does not respond, then the use of this combination is worse

 user-scalable=no or maximum-scale=1 with initial-scale=1

a game with an initial scale will not solve the problem for all devices.

+1
source

More articles:


All Articles