在webapp模式下，移动Safari中的viewport META标记被破坏了吗？

在iPad上使用Safari浏览器，访问这个页面： http://ifelse.org/projects/errors/viewport/test.html 在webapp模式下，移动Safari中的viewport META标记被破坏了吗？

这是来源：

<html> 
    <head> 
     <title>Viewport Test</title> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
     <meta name="viewport" content="width=1030" /> 
     <style> 
      body { 
       padding: 0; 
       margin: 0; 
      } 
      #test { 
       width: 1024px; 
       height: 500px; 
       border: 3px solid #ccc; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="test"> 
      <p>This is 1024 with a 3px border, so device width is 1030.</p> 
      <p>Works when viewing in Mobile Safari.</p> 
      <p>Does not work if you Bookmark it to the Home Screen and open from there.</p> 
      <p>Compare <a href="viewport_1030_safari.png">MobileSafari</a> view to <a href="viewport_1030_webapp.png">Webapp</a> view.</p> 
     </div> 
    </body> 
</html>

它应该是这样的图像，其中的1030个像素的viewport处于纵向模式完全可见：

轻按书签图标（+）
轻按添加至主屏幕
书签已创建。打开书签，网页将以全屏模式在webapp模式下打开。

viewport标记基本上被忽略。我已经尝试了许多起源设备 - 混合像素值的变体。没有。

所以......这是一个错误还是一个特征？

如果这是苹果公司的故意，它本质上意味着要正确开发漂亮的Web应用程序，你需要去实际宽度为768px ...？

来源

2010-10-12 donohoe

在过去几天内，我注意到Chrome在页面加载时抛出以下错误：“视口参数”宽度“无法识别，忽略内容。”最近有没有改变视口设置？如果OP的问题是相关的，我很感兴趣。 – 2010-12-06 17:53:12

它既不是一个错误或功能，我不认为。但它真的很烦人。

从iOS4开始，移动Safari浏览器在web-app模式下完全忽略了viewport元标记。在常规移动Safari浏览器模式下，它会自动计算所需的比例因子，以确保显式内容宽度映射到设备宽度。在Web应用程序模式下，它不再执行此操作，并始终使用scale = 1.0。因此，您必须切换到液体布局，并在您的viewport标记中设置width=device-width（这并不理想）。或者您必须使用UIWebView构建应用程序才能恢复正常行为。

它显着打破了网页应用程序的功能，恕我直言。

来源

2011-01-03 22:37:23 Ian

在webapp模式下，移动Safari中的viewport META标记被破坏了吗？

回答

相关问题