检测 iPhone iPad 等是否不工作

Question

问题：我找到了下面的javascript来检测是否是IPhone等等：

<script language=javascript>
        function isApple(userAgent){
          var iPhone = userAgent.match(/iPhone/i) !== null;
          var Apple = userAgent.match(/Apple/i) !== null;
          var Mac = userAgent.match(/Mac/i) !== null;
          var iPod = userAgent.match(/iPod/i) !== null;
          var iOS = userAgent.match(/iOS/i) !== null;
          return iPhone || Apple || Mac || iPod || iOS;
        }
        // Use like this...
        if(isApple(navigator.userAgent)){ 
          document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/bootstrap/css/iphone.css">');
        }
</script>

但是，它不能正常工作。看来它会影响桌面（非苹果）和具有 css 样式的安卓，应该只影响 iPhone。

不确定是否有更好的方法。任何帮助将不胜感激

*****我可以根据以下脚本检测用户正在使用的设备：

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";
alert(deviceType);

但是，当我执行以下操作时，如果它是 iPhone，css 不适用于 iPhone。图像仍然失真。

if(deviceType == 'iPad' || deviceType == 'iPhone'){ 
              document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/bootstrap/css/iphone.css">');
        }

以下是我正在使用的 CSS：

    @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 991px) and (min-width: 768px){
    #homepage .carousel .item {
        /*height: auto !important;*/
        margin-top: 115px !important;
    }
}
@media screen and (max-width: 991px) and (min-width: 768px) and (orientation:landscape){
    #homepage .carousel .item {
        /*height: auto !important;*/
        margin-top: 20px;
    }
}
@media (max-width:961px) and (min-width: 768px) and (orientation:landscape){
    #homepage .carousel .carousel-caption { 
        top: -20px !important;
    }
}
/* Portrait and Landscape iphone*/
@media only screen 
  and (max-device-width: 480px) 
  and (orientation:portrait) { 
    #homepage .carousel .item {margin-top: 71px; height: 150px !important;}
    #homepage .carousel .item img { max-width: 100%; height: auto; display: block; }

}
@media only screen 
  and (max-device-width: 480px) 
  and (orientation:landscape) { 
    #homepage .carousel .item { height: 250px !important; }
    #homepage .carousel .item img { max-width: 100%; height: auto; display: block; }
}

Answer 1

我经常用来检查用户代理是否是 iOS 的一个很好的正则表达式：

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

对于 iOS 设备总是返回 true，对于其他设备总是返回 false。

Answer 2

您是否在寻找仅限 JS 的解决方案？否则这也可能很有趣：http://mobiledetect.net/

顺便说一句，userAgent 检查不可靠，例如IE'userAgent 字符串同时包含“iphone”。我的 userAgent（ubuntu 上的铬）看起来像 Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/59.0.3071.109 Chrome/59.0.3071.109 Safari/537.36。使用正则表达式测试，我将使用 Mozilla、Apple、Google 或 Chromium 浏览器……这可能就是您的代码也会影响桌面和 android 客户端的原因。

Answer 3

我完全复制了上面 G.Hunt 的解决方案，但是由于您要求进一步澄清，请参阅下面的代码。如果您觉得这有帮助，请点赞 G.Hunt 的回答。

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    document.getElementsByTagName('head')[0].insertAdja‌​centHTML('beforeend'‌​, 
    '<link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/boo‌​tstrap/css/iphone.cs‌​s">');
}