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设备创建另一个样式表？如果是这样，我能够在堆栈溢出上找到以下JavaScript来检测浏览器是否在Android设备上：

$(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';
  }
}

检测Android设备

1 个答案: