CSS 或 Javascript 中是不是有任何方法可以判断用户是不是将 iPad 上的 HTML 页面作为 Web 应用程序查看？

Posted 2023-03-12

【中文标题】CSS 或 Javascript 中是不是有任何方法可以判断用户是不是将 iPad 上的 HTML 页面作为 Web 应用程序查看？

【英文标题】：Is there any way in CSS or Javascript to tell if a user is viewing an HTML page on their iPad as a web app?CSS 或 Javascript 中是否有任何方法可以判断用户是否将 iPad 上的 HTML 页面作为 Web 应用程序查看？

【发布时间】：2010-12-10 03:51:19

【问题描述】：

很简单的问题，我有一个专门在 iPad 上使用的网页。我已对其进行了设置，以便您可以将其保存到主屏幕并将其用作网络应用程序。

我想知道是否有一种方法通过 javascript 或 CSS 来判断页面是否正在从浏览器中查看，并且所有导航内容都位于顶部，或者是否已启动并被浏览为一个网络应用程序。

我尝试使用媒体查询为 Web 应用程序和导航浏览器设置不同的样式，但我想不出一个可行的查询。

【问题讨论】：

也许我在媒体查询中做错的是使用设备宽度而不是宽度，以获得视口大小。

【参考方案1】：

啊哈，在 Safari 文档中找到它：window.navigator.standalone

【参考方案2】：

只是在黑暗中刺了一下，但也许您可以查看当前显示文件的位置/网址 - 您应该能够区分桌面上的文件与来自网络服务器的文件的区别。

【参考方案3】：

很遗憾，您需要为此使用 JS，但我想这就是它的方式。您确实可以通过一些复杂的媒体查询（例如，您可以使用条件）有选择地定位浏览器，但您可能已经尝试过。最后，如果你还是要使用 JS（独立是我最近才发现的），你可能还想考虑使用 Modernizr - 一个简单的 JS，它将基于浏览器功能向 html 标记添加类，即理论上，一种针对某些样式/行为的浏览器比通过 JS 查询客户端名称/属性更好的方法，因为理论上可以被欺骗。例如，Modernizr 会根据 css3 边框半径是否可能添加一个类。