2

I have tried this javascript posted on here several years ago:

<script>
if (/iP(hone|od)|android.+mobile|BlackBerry|IEMobile/i.test(navigator.userAgent)) {
window.location.replace("page2.html");
} else if (/(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i.test(navigator.userAgent)) {
window.location.replace("page3.html");
}
</script>

Whilst the mobile redirect works on iphone, the tablet/ipad redirection is not working on iPad (6th generation or 8th generation). Any suggestions gratefully received. (Please understand I am not a coder in any responses.)

cozza8
  • 21
  • 3

2 Answers2

0

After walking through this thread: What is the best way to detect a mobile device?
It is apparently considered to be unreliable to use user agent for redirect.
Referring to this post: Detecting a mobile browser
Using something like screen resolution is something you can consider over this method:

( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 )

Consider the following as a workaround solution. As seen in the comments the user agents from ipadOS and MacOS are the same. However navigator.maxTouchPoints can be a differentiating factor:

    if (/mac/i.test(navigator.userAgent) && navigator.maxTouchPoints>0 ){
     // do something on ipad
    }
Alireza Azimi
  • 126
  • 7
  • If it's really just for layout purposes, you might be right, just go with window dimensions. But there are other reasons for device detection, for instance redirecting to a native app where this won't work. And as the regex are defined with the `/.../i` (i for case-insensitive) option, casing of both, the regex-pattern and the text to check is irrelevant ... The problem with these regex is, that iPad OS does identify itself with the same user agent as MacOS, thus they cannot be distinguished by regex alone. – derpirscher Dec 29 '20 at 14:14
  • You make a fair point there. I did not know iPad's user agent is indistinguishable from MacOs. I ran a console log on my google chrome, selecting iPad as the device and got the following: "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1". It does mention iPad ; granted I don't have a physical device to reproduce the scenario. – Alireza Azimi Dec 29 '20 at 14:38
  • There are iPads running iOS. They have `iPad` contained in their user agent. But newer iPads are also capable of running iPad OS. Their user agent does not contain `iPad` anymore, but looks the same as on MacOS – derpirscher Dec 29 '20 at 16:31
  • Then I'd recommend checking the touch points, as a work around. I'll update the answer based on that. – Alireza Azimi Dec 29 '20 at 17:39
  • Your contribution is much appreciated! I put the coding above specifying the navigator-maxTouchPoints in as an additional } else if and it now works on the iPad 6th gen and 8th gen. It also works fine on my touch-enabled laptop (by not redirecting). – cozza8 Dec 30 '20 at 21:46
0

You clever people on here might tell me reasons why this coding is no good, but since posting this question, I have now found that the following worked for an ancient small Android tablet, iPhones 6s & 11 and ipads 6th generation and 8th generation, a desktop computer and a touch-enabled laptop. That's now exhausted the technology in my house!

Placed in the head section:

<link rel="alternate" href="https://mywebsite.com/index.html" id="desktop"
media="only screen and (touch-enabled: 0)">
<link rel="alternate" href="https://mywebsite.com/page2.html " id="phone"
media="only screen and (max-device-width: 640px)">
<link rel="alternate" href="https://mywebsite.com/page3.html" id="tablet"
media="only screen and (min-device-width: 641px)">

<!-- Viewport is very important, since it affects results of media
query matching. -->
<meta name="viewport" content="width=device-width">

<!-- Place the JS in the head to load as little of the page as
possible before (potentially) redirecting. -->
<script src="js/device.js"></script>

And then I loaded the file device.js into the js folder. I got that from https://github.com/borismus/device.js/tree/master/build

cozza8
  • 21
  • 3
  • Unfortunately, I found that this script worked on a simple website. When I tried to use it on another more complicated website with lots of scripts running, I couldn't get it to work. I don't know if anyone has any suggestions for this? – cozza8 Dec 30 '20 at 21:22