CODEWITHSUNDEEP
javascriptandroidcssiphone
Roberto Flores
Roberto Flores

Reputation: 789

Detect Android Devices

Problem: I have a website that works fine on the desktop version. However, I created a different css styling sheet for iPhone so the carousel images would not skew. Doing this, I was able to find online a javascript function with the help of Stackoverflow, that detects iPhone and iPad devices.

However, it appears to be also making changes to android carousel slide. So the following is what I am using to detect iPhone and iPad devices:

 <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>

The following is the css styling for the iPhone. Their is a fix height so the images in the carousel does not skew on the 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; }
}

I currently have my styling in the following order and I am not sure it is do to the order that is causing the issue:

<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]-->

That being said, is the JavaScript I am using not the right approach to detect iPhones and iPads? If so, what can be done to modify it?

If not, would I need to create another styling sheet for android devices? If so, I was able to find on stack-overflow the following JavaScript that detects whether the browser is on a android device:

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

However, I am not sure the way I modify it will work.

Any help would be appreciated.

Thank You

Upvotes: 0

Views: 2103

Answers (1)

ZeroOne
ZeroOne

Reputation: 9117

You can try this.

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

Upvotes: 1

Related Questions