适用于 iPad 和 iOS 的响应式设计答案

【问题标题】：Responsive design for iPad and iOS适用于 iPad 和 iOS 的响应式设计
【发布时间】：2015-11-26 17:50:16
【问题描述】：

新的移动设备设计。如何确保浏览器（尤其是对于 iOS）真正使用我内置的 CSS 媒体查询，而不是简单地调整页面大小？

例如，我正在尝试设置媒体查询，以便在 iPad 上的纵向和横向视图中具有不同的布局，但看起来 Safari 只是重新调整大小或缩放，而不是加载媒体查询。

任何链接、教程也将不胜感激！

【问题讨论】：

Using the viewport meta tag to control layout on mobile browsers - Mobile | MDN - 可能需要设置 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 才能跨设备工作。

标签： ios ipad responsive-design

【解决方案1】：

我使用这些媒体查询来制作特定于 iPad 的 CSS

@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  and (orientation:landscape) 
{
    /* iPad landscape style here */
}
@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  and (orientation:portrait) 
{
    /* iPad portrait style here */
}

对于具有不同值的 iPhone 来说类似的。

如果在真实设备上测试很麻烦，您可以在 iOS 模拟器中检查设计（如果您在安装了 iOS 开发工具的 Mac 上）。您甚至可以使用 Safari 中的 Web Inspector 来检查模拟器中的 HTML、CSS、JavaScript。

【讨论】：

【解决方案2】：

一个链接就够了！

http://bricss.net/post/22198838298/easily-checking-in-javascript-if-a-css-media-query-has

JS 通过在每个媒体查询触发时弹出警报来拯救您。你应该知道一些 JS 才能使这些警报发生...

【讨论】：

【解决方案3】：

我们必须针对特定的媒体查询来处理这种情况。我建议你阅读this article。

【讨论】：