检测Android设备

问题：我有一个可以在桌面版上正常工作的网站。不过，我为iPhone创建了一个不同的CSS样式表，因此传送带图像不会倾斜。这样做，我可以在Stackoverflow的帮助下在线查找一个JavaScript函数，它可以检测iPhone和iPad设备。检测Android设备

但是，它似乎也在对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">'); 
     } 
    } 
});

但是，我不知道我修改的方式，将工作。

任何帮助，将不胜感激。

谢谢

来源

2016-11-29 Roberto Flores

看一看http://stackoverflow.com/questions/6031412/detect-android-phone-via-javascript-jquery –

@ PM77-1你觉得是创建一个不同的最佳方法CSS设计工作表和一个用于Android设备的javacript。我一直在尝试修改检测iphones和ipad设备的javacript，但还没有得到任何结果 –

您可以试试这个。

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

来源

2016-11-30 02:30:45 ZeroOne

检测Android设备

回答

相关问题