javascript - 检测安卓设备

Question

问题:我的网站在桌面版上运行良好。但是，我为 iPhone 创建了一个不同的 css 样式表，因此轮播图像不会倾斜。为此，我能够在 Stackoverflow 的帮助下在线找到一个 javascript 函数，它可以检测 iPhone 和 iPad 设备。

但是，它似乎也在对 android carousel slide 进行更改。所以以下是我用来检测 iPhone 和 iPad 设备的内容:

 <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;
            }
            .
            if(isApple(navigator.userAgent)){ 
              document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/assets/bootstrap/css/iphone.css">');
            }
        </script>

以下是 iPhone 的 css 样式。它们是固定高度，因此轮播中的图像不会在 iPhone 上倾斜:

/* Portrait and Landscape iphone*/
@media only screen 
  and (max-device-width: 480px) 
  and (orientation:portrait) { 
    #homepage .carousel .item { 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; }
}

我目前的样式按以下顺序排列，但我不确定它是否符合导致问题的顺序:

<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/theme/theme.min.css">
    <!--- Bootstrap classes overrides --->
    <link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/assets/bootstrap/css/bootstrap_overrides.css">
    <!--- IPHONE classes overrides --->
    <link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/assets/bootstrap/css/iphone.css">
    <!--[if IE]>
    <link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/ie/ie.min.css">
    <link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/ie/ie_overrides.css">
    <![endif]-->

    <!--[if lte IE 9]>
        <link rel="icon" href="/images/favicon1.ico" type="image/x-icon" /> 
    <![endif]-->

也就是说，我使用的 JavaScript 是否不是检测 iPhone 和 iPad 的正确方法？如果是这样，可以做些什么来修改它？

如果没有，我是否需要为 Android 设备创建另一个样式表？如果是这样，我能够在 stack-overflow 上找到以下用于检测浏览器是否在 android 设备上的 JavaScript:

$(function isAndroid(userAgent) { // Wait for page to finish loading.
    if(navigator != undefined && navigator.userAgent != undefined) {
        user_agent = navigator.userAgent.toLowerCase();
        if(isAndroid(user_agent.indexOf('android')) > -1) { // Is Android.
            document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/assets/bootstrap/css/android.css">');
        }
    }
});  

但是，我不确定我修改它的方式是否有效。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

你可以试试这个。

function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
  {
    return 'ios';
  }
  else if( userAgent.match( /Android/i ) )
  {
    return 'android';
  }
  else
  {
    return 'unknown';
  }
}