iPhone 5未正确显示网站的响应模式

Question

我创建了这个网站,到目前为止我还没有找到为什么只在某些iPhone手机上,网站没有以其响应模式显示.(它在大多数iPhone手机上都能正确显示).

这是我到目前为止所做的:

1. 检查Android设备上的网站:它看起来不错
2. 检查不同浏览器上的响应式网站:它有效
3. 使用在线iphone模拟器来查看网站的外观:显示正常
4. 在iPhone设备上清除了浏览器缓存和cookie,这些问题显示响应模式:仍然没有运气

这是一个屏幕截图,显示网站主页应该如何在iphone中显示.

Answer 1

尝试使用以下媒体查询

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

您正在使用max-width这是目标显示区域的宽度,其中max-device-width是设备整个渲染区域的宽度.

我希望它会对你有所帮助

Answer 2

我认为您的问题不是使用视口元标记.移动设备通常具有比桌面显示器高得多的像素密度,这可能导致无法正确读取媒体查询.

尝试在你的头部添加这样的东西:

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