响应式设计适用于桌面，但不适用于 iPhone答案

【问题标题】：Responsive design works on desktop but not iphone响应式设计适用于桌面，但不适用于 iPhone
【发布时间】：2016-08-18 11:11:35
【问题描述】：

我正在使用 WordPress 的免费主题。我已经定制了设计以满足我的需求，但是当我使用 iPhone 或 iPad 打开网站时，设计出现问题。我已经尝试了我所知道的一切。有人可以帮我确定这个问题的根源吗？ [我网站的链接。][1]

【问题讨论】：

问题是指在标题和导航栏之前显示的大空白区域。

标签： iphone wordpress responsive-design wordpress-theming responsive

【解决方案1】：

试试这个媒体查询 iPhone 6/6 Plus 和 Apple Watch CSS媒体查询

@media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (orientation: landscape)
 and (-webkit-min-device-pixel-ratio: 2)
 { }

iPhone 6 纵向

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }

iPhone 6 Plus 横向

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }

iPhone 6 Plus 纵向

 @media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: portrait)

和 (-webkit-min-device-pixel-ratio: 3) { }

iPhone 6 和 6 Plus

  @media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
   { }

苹果手表

  @media
  (max-device-width: 42mm)
   and (min-device-width: 38mm)
  { }

图片响应式

img {

   max-width: 100%;
  }

【讨论】：

谢谢。当我使用诸如 [quirktools.com/screenfly/] 之类的工具进行查找时，iPhone 视图看起来非常好，但在真正的 iPhone 视图上仍然无法正常工作。对好的模拟器有什么建议吗？
您应该确保所有图像也都是响应式的。对于图像响应，请检查最后的上述帖子。
如果您在滑块内使用动态文本，则必须制作响应式滑块图像并减小字体大小。

【解决方案2】：

你在使用响应式元标记吗？

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

【讨论】：