CODEWITHSUNDEEP
iphoneioscssresponsive-designmedia-queries
farjam
farjam

Reputation: 2299

iPhone 5 is not displaying the responsive mode of the website correctly

I have created this website, and so far I have not been able to find out why only on certain iPhone phones, the website is not displayed in its responsive mode. (it shows correctly on most iPhone phones).

Here is what I have done so far:

  1. Checked the website on Android devices: it looks good
  2. Check the responsive website on different browsers: it works
  3. Use online iphone simulators to see how the website looks: Shows fine
  4. Cleared browser cache and cookies on iPhone devices that have problem showing the responsive mode: Still no luck

Here is a screen shot of how the website homepage SHOULD look like in iphones.

enter image description here

Upvotes: 7

Views: 15171

Answers (6)

xdsdsdsdsssssss
xdsdsdsdsssssss

Reputation: 1

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
and (device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}
}

Upvotes: 0

user3420765
user3420765

Reputation: 19

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
and (device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Upvotes: 0

Umar Khan
Umar Khan

Reputation: 454

try to use following media query 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

you are using max-width which is the width of the target display area where as max-device-width is the width of the device's entire rendering area.

i hope it will help you

Upvotes: 9

Jonathan Pyper
Jonathan Pyper

Reputation: 28

Try a width of 568 for iphone5

Upvotes: 0

Oriol
Oriol

Reputation: 12730

The meta viewport tag is not the issue.

Several viewport tests look as it supposed to.

Review the CSS media calls, simplify them and make sure they don't overwrite each other.
Javascript is not the issue either. I've disabled it all.

You can also take advantage of specific media queries for iPhones:

<!-- iPhone 4+ -->
@media only screen and (device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for iPhone */
}

Hope this helps!

Upvotes: 0

Blake Mann
Blake Mann

Reputation: 5490

I would assume that your problem is not using a viewport meta tag. Mobile devices often have much higher pixel densities than a desktop display would, which can cause media queries to not be read correctly.

try adding something like this to your head section:

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

Upvotes: 6

Related Questions