I use Javascript code
if( (Android|webOS|iPhone|iPad|iPod|BlackBerry).test(navigator.userAgent) ) {}
for mobile device detection, but Chrome at iOS is not detected. Is there a way to detect it? Thanks.
4 Answers
According to Google Developers, the UA string looks like this:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3
Where it differs from iOS Safari in that it says CriOS instead of Version. So this:
if(navigator.userAgent.match('CriOS'))
Should do it.
8 Comments
Yuji 'Tomita' Tomita
You use browser sniffing to fight very specific browser bugs.
Soviut
I have to use this because chrome on ios is considered an "unsupported browser" for facebook's login system. No way to do feature detection on that.
Brian Cannard
Chrome on iOS works exactly the same as Safari, and even have less bugs related to auto-disappear of address bar and bottom navigation bar, which Chrome doesn't have. Chrome on iOS exists. In August 2017, 1,377,323 users in the U.S. are using Chrome on iPhone 6/7/S, and another 1,262,546 users are using Chrome on iPad, and users exist who're using Chrome on iPhone 5. @Soviut please consider changing your comment to update the situation in 2017. Hope Facebook considers iOS Chrome as supported browser now.
jmc
@BrianHaak Chrome on iOS doesn’t support webcam access. Safari does. A very specific reason to detect chrome on iOS.
Martin Joiner
@BrianHaak Chrome on iOS doesn't support serviceWorkers either even though Safari does. Decision by Apple to repress that part of it.
|
if you want simple true/false answer:
if(/CriOS/i.test(navigator.userAgent) &&
/iphone|ipod|ipad/i.test(navigator.userAgent)){
return true;
}else{
return false;
}
1 Comment
Tomáš Kudláč
it could be simplified to
return /CriOS/i.test(navigator.userAgent) && /iphone|ipod|ipad/i.test(navigator.userAgent)Perhaps, you could try:
var os = navigator.platform;
Then handle the os variable accordingly for your result.
You can also loop through each object of the navigator object to help get you more familiarized with the objects:
<script type="text/javascript">
for(var i in navigator){
document.write(i+"="+navigator[i]+'<br>');
}
</script>
As found in this anwser: jQuery/Javascript to detect OS without a plugin?
1 Comment
Richard J. Ross III
This doesn't solve the specific scenario outlined by the OP, which is detecting the Chrome app on iOS.
you can use 51Degrees' free cloud based solution to get this information. As part of the free cloud service you have access to the BrowserName property which includes Chrome for iOs.
Some sample code you could use is below. You can get the free cloud key by going through the store page here https://51degrees.com/products/store/rvdsfcatid/cloud-device-detection-7
<!DOCTYPE html>
<html>
<body>
<p id="id01"></p>
<script>
var xmlhttp = new XMLHttpRequest();
<!-- Insert Cloud key here. -->
var key = "Licence Key"
<!-- Receives UserAgent from clients connection. -->
var ua = window.navigator.userAgent;
<!-- Lists the properties required. -->
var url = ("https://cloud.51degrees.com/api/v1/"+key+"/match?user-agent="+ua+"&Values=\
BrowserName");
<!-- Parses the JSON object from our cloud server and returns values. -->
xmlhttp.onreadystatechange = function(){
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200){
var match = JSON.parse(xmlhttp.responseText);
var text = ""
document.getElementById("id01").innerHTML=\
"UserAgent:"+ua+"</br>"+
"BrowserName:"+match.Values.BrowserName;
}
}
<!-- Sends request to server. -->
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
</body>
</html>
For more information on use of the JavaScript Cloud API you can view more tutorials here https://51degrees.com/Developers/Documentation/APIs/Cloud-API/JavaScript-Cloud
Disclosure: I work at 51Degrees
bodyelement. Modernizr does this.windowproperty (probably never), it'll remain perfectly valid.