iPhone 5未正确显示网站的响应模式 [英] iPhone 5 is not displaying the responsive mode of the website correctly

问题描述

我已经创建了此网站，到目前为止，我还无法查明为什么仅在某些iPhone手机上，则该网站不会以其响应模式显示. (在大多数iPhone手机上都能正确显示).

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. 在Android设备上检查了网站:它看起来不错
2. 在不同的浏览器上检查响应式网站:它可以工作
3. 使用在线iphone模拟器查看网站的外观:显示正常
4. iPhone设备上已清除的浏览器缓存和cookie，它们无法显示响应模式:仍然没有运气

以下是网站首页在iPhone中的外观的屏幕快照.

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

推荐答案

尝试使用以下媒体查询

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

您使用的是max-width，它是目标显示区域的宽度，其中max-device-width是设备整个呈现区域的宽度.

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.

我希望它将对您有帮助

这篇关于iPhone 5未正确显示网站的响应模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！