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

Question

移动设备设计的新手。我如何确保，特别是对于iOS，浏览器确实使用我内置的CSS媒体查询而不是简单地重新调整页面大小？

对于instace，我正在尝试设置媒体查询，以便在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/easily-checking-in-javascript-if-a-css-media-query-has

JS通过在每个媒体查询触发时弹出警报来解决问题。你应该知道一些JS来发生这些警报...

Answer 3

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