Detect if IPhone IPads, etc not working

Question

Problem: I have found the following javascript to detect if it is IPhone and so on:

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

However, it does not work properly. It appears it affects desktop(non apple) and andriods with the css styling that should come affect only IPhones.

Not sure if there is a better approach. Any help would be appreciated

*****I am able to detect which device the user is using based on the following script:

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";
alert(deviceType);

However, when I do the following so that if it is an iPhone, the css does not apply to the iPhones. The image is still disorted.

if(deviceType == 'iPad' || deviceType == 'iPhone'){ 
              document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/bootstrap/css/iphone.css">');
        }

and the following is the CSS I am using:

    @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 991px) and (min-width: 768px){
    #homepage .carousel .item {
        /*height: auto !important;*/
        margin-top: 115px !important;
    }
}
@media screen and (max-width: 991px) and (min-width: 768px) and (orientation:landscape){
    #homepage .carousel .item {
        /*height: auto !important;*/
        margin-top: 20px;
    }
}
@media (max-width:961px) and (min-width: 768px) and (orientation:landscape){
    #homepage .carousel .carousel-caption { 
        top: -20px !important;
    }
}
/* Portrait and Landscape iphone*/
@media only screen 
  and (max-device-width: 480px) 
  and (orientation:portrait) { 
    #homepage .carousel .item {margin-top: 71px; 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; }
}

language=javascript should be language="javascript" also no need to specify the language at all. simply use — Sagar V, Jul 27 '17 at 15:33
_“Not sure if there is a better approach”_ - well that depends on what actual problem you are trying to solve here. Usually you would serve mobile devices with different formatting using media queries, mainly reacting to the device width to determine how to display the content. Whether you have a valid reason here to try and treat devices differently based on their user agent, we don’t know. (But even in that case, I would normally rather not use an extra stylesheet, but instead set a class on the html or body element, so that the rest of the formatting can be different based on that.) — CBroe, Jul 27 '17 at 15:34
Check this post https://stackoverflow.com/questions/11077853/phonegap-detect-device-type-in-phonegap — Jonathan Anctil, Jul 27 '17 at 15:36
@SagarV `language=javascript` is as valid as `language="javascript"`. Both of them are meaningless, however, as the correct mime type would be `application/javascript`. But as you said, no need to include that. — idmean, Jul 27 '17 at 15:36
I will add that on my Windows 10 computer running chrome, `navigator.userAgent` includes the word "Apple", so this form of styling would fail for me. The full string is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36` — SimplyComplexable, Jul 27 '17 at 15:37

score 0 · Accepted Answer · answered Jul 27 '17 at 15:36

0

A good regex I always use to check if the user agent is iOS:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

Always returns true for iOS devices and false for anything else.

answered Jul 27 '17 at 15:36

G.Hunt

1,224
6
19

1

As stated in my comment on the question my: 'my Windows 10 computer running chrome, `navigator.userAgent` includes the word "Apple"'; this solution would solve the problem. Also a much better regex test to streamline it into one test rather than run multiple tests. – SimplyComplexable Jul 27 '17 at 15:38
@ZackSunderland: Can I do something like the following: var deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null"; if ((deviceType == "iPhone") || (deviceType == "iPad")){document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '');} – ROB Jul 27 '17 at 15:49

score 0 · Answer 2 · answered Jul 27 '17 at 16:00

0

Are you looking for JS only solutions? Else this could be interesting, too: http://mobiledetect.net/

BTW userAgent checks are not reliable as e.g. IE' userAgent string contains "iphone" in the meantime. And my userAgent (chromium on ubuntu) looks like Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/59.0.3071.109 Chrome/59.0.3071.109 Safari/537.36. Using a regex test I would be using a Mozilla, Apple, Google oder Chromium browser... This may be why your code affect desktop and android clients, too.

answered Jul 27 '17 at 16:00

simne7

151
1
1
10

@ siimne7: Yes, JS only solution. What do you mean "contains 'iphone' in the meantime"? – ROB Jul 27 '17 at 16:04
See https://stackoverflow.com/questions/9038625/detect-if-device-is-ios. Obvs somebody at MS thought it's a good idea to insert "iphone" into IE's userAgent string... – simne7 Jul 27 '17 at 16:15

score 0 · Answer 3 · answered Jul 27 '17 at 16:05

0

I'm entirely copying G.Hunt's solution above, but since you asked for further clarification, please see the below code. If you find this helpful please upvote G.Hunt's answer.

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    document.getElementsByTagName('head')[0].insertAdja‌centHTML('beforeend'‌, 
    '<link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/boo‌tstrap/css/iphone.cs‌s">');
}

answered Jul 27 '17 at 16:05

SimplyComplexable

1,007
10
16

@ Zack Sunderland: So the approach I did wouldnt work then? And I will try the approach you are doing – ROB Jul 27 '17 at 16:13
@ROB No, your approach as you wrote it would not work. For one the `match()` function returns an array so a better way would just be to check if the returned value is not null `navigator.userAgent.match(/iPad/) ? 'iPad' : ...`, but even in this case the code I provided is accomplishing the same thing, just with far less steps and a lot clearer code. – SimplyComplexable Jul 27 '17 at 16:17
@ Zack Sunderland: Okay.Thanks for the clarification. Although it detects what device it is using, the styling is not working – ROB Jul 27 '17 at 16:29
@ROB that could be a lot of things. Is the link element actually being added to the head? Is the link wrong? Check the console for additional help. – SimplyComplexable Jul 27 '17 at 16:32
@ Zack Sunderland: How would I check the console for the iPhone? On the browser, it looks fine and works fine for tablets and iPad, but for the iPhone, it is not showing any changes – ROB Jul 27 '17 at 16:33
In chrome developer tools use the mobile device simulator to simulate an iOS device which will apply the appropriate userAgent. https://developers.google.com/web/tools/chrome-devtools/device-mode/ – SimplyComplexable Jul 27 '17 at 16:35
@ Zack Sunderland: Question: The insertAdjacentHTML is breaking. It is creating the following characters: What would be causing that? – ROB Jul 27 '17 at 21:53

Detect if IPhone IPads, etc not working

3 Answers3