移动 Safari 与主屏幕 Web 应用程序
我正在为 iOS 开发一个 web 应用程序，我注意到在移动 safari 上运行和从主屏幕运行之间存在一些奇怪的事情。
是否有任何资源可以提供在两种模式之间切换的通用接口？
如果没有，是否有任何资源详细说明两种模式之间的所有差异和陷阱？
我遇到过：
长轮询有点奇怪。请参阅此示例。
window.innerWidth & window.innerHeight 不一致。
- Mobile Safari - 垂直方向按预期工作，水平方向则不然
- 垂直
- 宽度 - 768
- 身高 - 946
- 水平
- 宽度 - 769??
- 身高 - 518??
- 垂直
- 主屏幕上的网络应用程序 - 这些总是有意义的。
- 垂直
- 宽度 - 768
- 高度 - 1004
- 水平
- 宽度 - 1024
- 身高 - 748
- 垂直
其他东西：
这个问题也揭示了一些奇怪的行为。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我认为 Apple 尚未公开记录 iOS 中全屏 Web 应用程序的属性，因此您发现的任何内容都可能是轶事，因此在未来版本中不够可靠。
您可能会更幸运地构建一个只有 UIWebView 渲染您的 Web 应用程序的应用程序。 iOS 应用程序的视图模式定义明确且记录良好，并且应用程序可以提供您将来可能需要的其他功能（例如本地通知、后台执行、自定义 URL 处理程序）。
I don't think Apple has publicly documented the attributes of the full screen web apps in iOS, so anything you find may be anecdotal, and therefore not reliable enough to depend on in future releases.
You may have better luck building an application which has just a UIWebView rendering your web app. The view modes for iOS applications are clearly defined and well documented, and the application can provide other features you may need in the future (such as local notifications, background execution, custom URL handlers).
当使用
你会得到你的 window.innerWidth ！
当使用
你会得到>>>横向：1024 x 690 &肖像：768 x 946（“野生动物园”模式）
When using
<meta name="viewport" content="user-scalable = no, width = device-width" />you will get your window.innerWidth's!!!
When using
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" />you will get >> landscape: 1024 x 690 & portrait: 768 x 946 ('safari' mode)
Apple 在主屏幕应用程序上支持四种选项：图标、启动屏幕、隐藏工具栏和设置状态栏模式。
请参阅 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3 。
There are four options that Apple supports on Home Screen apps: icon, splash screen, hiding of toolbar and setting status bar mode.
See https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3.
如果您正在构建移动应用程序，您可能需要看看 Sencha Touch这消除了管理移动设备细微差别的麻烦。
然后你就可以在它旁边构建你的常规网络应用程序。
If you're building an app for mobile, you may want to take a look at Sencha Touch which takes away the headache of managing the nuances in mobile devices.
Then you can just build your regular web app beside it.