iPad和iOS的响应式设计

jm2pwxwz 于 2023-05-02 发布在 iOS

关注(0)|答案(3)|浏览(151)

为移动的设备设计的新手。我如何确保，特别是对于iOS，浏览器确实使用了我内置的CSS媒体查询，而不是简单地调整页面大小？
对于instace，我试图设置一个媒体查询，以便在iPad上的纵向和横向视图中具有不同的布局，但看起来Safari只是重新调整大小或缩放，而不是加载媒体查询。

ios

来源：https://stackoverflow.com/questions/16003153/responsive-design-for-ipad-and-ios

3条答案

按热度按时间

afdcj2ne1#

我使用这些媒体查询来制作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。