CODEWITHSUNDEEP
iphoneiosmeta-tagsviewportretina-display
Jean
Jean

Reputation: 313

Viewport meta tag not working for iPhone

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

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

the page will load zoomed in. Not all the way though (roughly 300px in width are out of view).

Also, you can not zoom the page out far enough to see the whole thing.

Shouldn't the width=device-width solve that?

So I tried an initial-scale of 0.29, which worked fine for the iPhone. But when loading the site on an iPad, it would obviously be way too small.

How can I fix this?

UPDATE: So I just figured, that the width seems to be defined by the height of my page. Safari on the iPhone fits the height in the viewport and doesn't care about fitting the width, also won't let you zoom out to see the whole width. It seem like if the page would be higher, you could see more of the width. The width is just fine in landscape.

Upvotes: 5

Views: 3502

Answers (1)

Akki619
Akki619

Reputation: 2432

If your design is not responsive, It is better to target particular device resolution like for 320 width I would go for <meta name="viewport" content="width=320">

I have also noticed that content set as device width tend to break on ios 4 safari. I am afraid it's not the problem of ios safari it's the non-responsive design that causing the problem.

Also if the design is not responsive, then using this combination is worst

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

playing with initial scale will not solve the problem for all the devices.

Upvotes: 2

Related Questions