CODEWITHSUNDEEP
htmlcssmedia-queriesviewport
davey
davey

Reputation: 1564

viewport iphone4/4s and media queries

I have a website which I have created a media query for a resolution of 480px in width. The iphone 4 correctly picks up this version but for some reason it overhangs the page its not using the actual resolution of the iphone 4 which is 640px in width its using a width of 320px. (i read somewhere that it does for backward compatibility with apps developed for iphone 3)

Is there a way using a viewport or media query to correct this? Many Thanks Dave

This is my current viewport:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=5.0; minimum-scale=0.5; target-densityDpi=device-dpi" />

Media query

@media only screen and (max-width: 480px) {
}

Upvotes: 0

Views: 826

Answers (1)

Magnus Magnusson
Magnus Magnusson

Reputation: 1494

The viewport meta "target-densitydpi=device-dpi" currently only works on the android platform. As it stands there is no equivalent for iOS.

You can achieve something similar using a double pixel density media query to target the iPhone like

@media screen and (-webkit-device-pixel-ratio: 2) {}

and then scaling everything down in CSS.

If you go that route scaling everything on the site using % and EM's would probably save you a lot of work in the long run.

Upvotes: 1

Related Questions