移动野生动物园与主屏幕webapp

Question

我正在为iOS开发一个webapp，我注意到在手机游戏和从主屏幕上运行之间有一些奇怪的事情。

是否有任何资源可以提供在模式之间切换的通用界面？

如果没有，是否有任何资源详细说明两种模式之间的所有差异和陷阱？

我遇到的事情：

长轮询有点奇怪。请参阅this example。

window.innerWidth＆amp; window.innerHeight不一致。

• 移动Safari-垂直方向按预期工作，水平方向不工作
  • 垂直
    • width-768
    • height-946
  • 水平
    • width-769 ??
    • 身高 - 518 ??
• 主屏幕上的Web应用程序 - 这些总是有意义的。
  • 垂直
    • width-768
    • height- 1004
  • 水平
    • width-1024
    • height-748

其他内容：

我发现this和this很有趣。

This question也揭示了奇怪的行为。

Answer 1

我认为Apple并未公开记录iOS中全屏网络应用程序的属性，因此您发现的任何内容都可能是轶事，因此在未来版本中不够可靠。

您可以更好地构建一个只有UIWebView渲染您的Web应用程序的应用程序。 iOS应用程序的视图模式已明确定义并有详细记录，应用程序可以提供将来可能需要的其他功能（例如本地通知，后台执行，自定义URL处理程序）。

Answer 2

使用时

<meta name="viewport" content="user-scalable = no, width = device-width" />

你会得到你的window.innerWidth !!!!

使用时

<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" />

你会得到＆gt;＆gt;风景：1024 x 690＆amp;肖像：768 x 946（'safari'模式）

Answer 3

Apple支持主屏幕应用程序有四个选项：图标，启动画面，隐藏工具栏和设置状态栏模式。

请参阅https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3。

Answer 4

如果您正在构建移动应用，那么您可能需要查看Sencha Touch，这可以消除管理移动设备细微差别的麻烦。

然后，您可以在它旁边构建常规Web应用程序。