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

Posted 2023-02-19

【中文标题】响应式设计适用于桌面，但不适用于 iPhone

【英文标题】：Responsive design works on desktop but not iphone

【发布时间】：2016-08-18 11:11:35

【问题描述】：

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

【问题讨论】：

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

【参考方案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">