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样式的andriods应该只影响IPhones。

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

*****我能够根据以下脚本检测用户正在使用哪个设备：

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/

BTW userAgent检查不可靠，例如IE＆＃39; userAgent字符串包含＆＃34; iphone＆＃34;同时。而我的userAgent（ubuntu上的chrome）看起来像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解决方案，但是由于您要求进一步澄清，请参阅以下代码。如果你觉得这很有用，请upvote 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">');
}

检测IPhone IPads等是否无法正常工作

3 个答案: