檢測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設備

回答

相關問題