iPhone 5 is not displaying the responsive mode of the website correctly
Solution 1
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
Solution 2
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" />
farjam
Full-stack web application developer with almost a decade of experience in developing and maintaining web applications with a focus on usability, cross-browser functionality and best practices. I’m an energetic self-starter with excellent analytical, organizational, and creative skills and try to constantly keep myself up to date with all new technologies in my field. Main Specialties: Web Development, PHP, Laravel, Zend, React.js, Wordpress, Drupal, HTML5, CSS, jQuery, JavaScript, OpenCart, SQL, MVC, CodeIgniter, LAMP, Responsive Design, Apache, Content Management, Cross Browser Development, Theme Development
Updated on August 07, 2022Comments
-
farjam over 1 year
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:
- Checked the website on Android devices: it looks good
- Check the responsive website on different browsers: it works
- Use online iphone simulators to see how the website looks: Shows fine
- 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.
-
farjam over 10 yearsI have that exact line inside the head :) <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
Blake Mann over 10 yearsAh, I apologize for not seeing that.. In that case, try ensuring that the offending device does not have 'Zoom' enabled in the accessibility settings. Changing this is often a fix for this issue, just make sure to refresh the page after making the change.
-
farjam over 10 yearsI just checked and verified that the zoom is not enabled either.
-
farjam over 10 yearsUnfortunately that doesn't work for me either. I tried your suggestion and other suggestions by other people on this thread, but the "faulty iphones" don't appear to take any of them into account.
-
farjam over 10 yearsUnfortunately that doesn't work for me either. I tried your suggestion and other suggestions by other people on this thread, but the "faulty iphones" don't appear to take any of them into account.
-
Umar Khan over 10 yearswell i could see the problem on android devices as well And what i think it is because of 100% height so its getting the height of the device but not the width so you can try 100% width instead of 100% height. And good approach according to me will be using min-width and max-width
-
farjam over 10 yearsYour comment about the 100% height saved my life :) I set the body height to auto on mobiles and it now works perfectly.
-
Alex almost 9 yearsFarjam, I'm having the same problem now. It appears to show good on Android phones, but not on Iphones. And on simulators etc. it looks good. I tried setting the body to height auto,, but it doesn't work for me. Any tips?