在 jQuery if/then 语句中识别 iOS 用户代理的简单方法？答案

【问题标题】：Simple way to identify iOS user agent in a jQuery if/then statement?在 jQuery if/then 语句中识别 iOS 用户代理的简单方法？
【发布时间】：2023-04-03 00:14:01
【问题描述】：

听起来很像..

有没有什么神奇又简单的说法：

    if (user agent is iOS) {
        if (browserRatio >=1.5) {
            $container.css('min-height', '360px');
        } else {
            $container.css('min-height', '555px');
        }
     }

【问题讨论】：

标签： jquery ios if-statement user-agent

【解决方案1】：

找到了。

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    if (browserRatio >=1.5) {
        $container.css('min-height', '360px');
    } else {
        $container.css('min-height', '555px');
    }
}

【讨论】：

navigator.userAgent.match(/(iPod|iPhone|iPad)/i) 在你没有的地方为我工作（i 使其不区分大小写）
可以进一步压缩这个：/(ip(hone|od|ad))/i :)
这不是最终的解决方案，因为它也与 WP IE 匹配。来自 IE11 的示例 UA：Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 925) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
确实可以通过媒体查询处理跨不同浏览器的许多事情。但是，有些事情是浏览器特定的。例如，跨浏览器的自动完成背景颜色，而不是分辨率是不同的。如果需要手动设置输入元素的背景颜色以模拟自动填充（我正在使用的 Web 应用程序就是这样做的），那么需要知道正在运行哪个浏览器。因此，感谢楼上的回答。这是正确的。
@seniorpreacher 在我看来，WP IE 正在尝试通过在末尾有意包含 iOS Safari 的用户代理来加入这场比赛。因此，也许这并不是那么出乎意料的行为。

【解决方案2】：

我知道您特别询问 jquery，但 IMO，您几乎肯定想为此使用 CSS3 @media queries。甚至还支持测试landscape or portrait orientation。

@media (orientation:landscape) {
  .container_selector {
    min-height: 555px;
  }
}
@media (orientation:portrait) {
  .container_selector {
    min-height: 360px;
  }
}

希望这会有所帮助！

【讨论】：

我听到了.. 使用 + 喜欢它们，但对于这种情况，它的最小高度仅适用于 iOS，而不是 Web 应用程序模式。所以它需要是 Script :(
我可以专门针对 iPhone 4 使用 -webkit-min-device-pixel-ratio: 2，但不幸的是没有 css if/then 除非您使用专门的库
那么，您可以使用 window.screen.height/width 属性吗，或者这也无济于事？我不知道您所说的“不在网络应用模式下”是什么意思。
不熟悉 window.screen.height/width... 听起来很有趣。 iPhone 在浏览器中有一个 URL 栏，当网站支持 Web 应用程序时，该 URL 栏会被删除。要为访问该网站的普通用户假装它，您可以使用 javascript 强制 url 栏隐藏，但要这样做，我需要在网站上定义高度。所以.. 我使用 if/then 将适当的高度置于假网络应用程序模式

【解决方案3】：

为了让它工作，你需要定义browserWidth，但是它会工作。这里我只针对 iPad。

    $(window).load(function(){
      var browserWidth = $(window).width(); 

      if (navigator.userAgent.match(/(iPad)/)) {
        if (browserWidth == 768) {
            $('.sectionI').css({'margin-left': '30px'});
        } else if (browserWidth == 1024)  {
            $('.sectionI').css({'margin-left': '0px'});
        }
      }
    });

【讨论】：

【解决方案4】：

对于网络应用版本，试试这个。

if (
    ("standalone" in window.navigator) &&
    !window.navigator.standalone
    ){

    // .... code here ....
}

【讨论】：

【解决方案5】：

要确保此字符串不匹配：Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 925) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537 只需将您的代码更改为

if (navigator.userAgent.match(/(\(iPod|\(iPhone|\(iPad)/)) {
    if (browserRatio >=1.5) {
        $container.css('min-height', '360px');
    } else {
        $container.css('min-height', '555px');
    }
}

【讨论】：

【解决方案6】：

根据我之前回答的 cmets，听起来真正的问题是“如何在 iPhone 中隐藏 URL 栏”。对于这个问题，我发现了这个：

How to Hide the Address Bar in MobileSafari:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">...</body>

【讨论】：

不，不是。我想确定 iOS 用户代理以对其应用 if/then 语句。为了阐明 iOS 上的 Web 应用模式，我做了一个漂亮的小图：cl.ly/0d2V0o3O453a123v192u
漂亮的模型和好主意 jimbojw，将来会使用。