ios - 适用于 iPad 和 iOS 的响应式设计

Question

新设计的移动设备。我怎样才能确保，尤其是对于 iOS，浏览器真的在使用我内置的 CSS 媒体查询，而不是简单地重新调整页面大小？

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

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

Answer 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。

Answer 2

一个链接就够了！

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

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

Answer 3

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