Javascript 通过javascript检测ipad/iphone webview
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4460205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
detect ipad/iphone webview via javascript
提问by sod
Is there a way to differ via javascript if the website runs inside the ipad safari or inside an application WebView?
如果网站在 ipad safari 内或应用程序 WebView 内运行，有没有办法通过 javascript 进行区分？
采纳答案by ThinkingStiff
This uses a combination of window.navigator.userAgentand window.navigator.standalone. It can distinguish between all four states relating to an iOS web app: safari (browser), standalone (fullscreen), uiwebview, and not iOS.
这里使用的组合window.navigator.userAgent和window.navigator.standalone。它可以区分与 iOS 网络应用程序相关的所有四种状态：safari（浏览器）、独立（全屏）、uiwebview 和非 iOS。
Demo: http://jsfiddle.net/ThinkingStiff/6qrbn/
演示：http: //jsfiddle.net/ThinkingStiff/6qrbn/
var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );
if( ios ) {
if ( !standalone && safari ) {
//browser
} else if ( standalone && !safari ) {
//standalone
} else if ( !standalone && !safari ) {
//uiwebview
};
} else {
//not iOS
};
回答by neoneye
User Agents
用户代理
Running in UIWebView
在 UIWebView 中运行
Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176
Running in Safari on iPad
在 iPad 上的 Safari 中运行
Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
Running in Safari on Mac OS X
在 Mac OS X 上的 Safari 中运行
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3
Running in Chrome on Mac OS X
在 Mac OS X 上的 Chrome 中运行
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19
Running in FireFox on Mac OS X
在 Mac OS X 上的 FireFox 中运行
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0
Detection Code
检测码
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
回答by Nicolas S
I think that you can just use the User-Agent.
我认为你可以只使用User-Agent.
UPDATE
更新
Page browsed using iPhone Safari
使用 iPhone Safari 浏览的页面
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7
I will try in a second with UIWebView
我稍后会尝试使用 UIWebView
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117
The difference is that the Safari one says Safari/6531.22.7
不同之处在于 Safari 一说 Safari/6531.22.7
Solution
解决方案
var isSafari = navigator.userAgent.match(/Safari/i) != null;
回答by John Doherty
Yeah:
是的：
// is this an IPad ?
var isiPad = (navigator.userAgent.match(/iPad/i) != null);
// is this an iPhone ?
var isiPhone = (navigator.userAgent.match(/iPhone/i) != null);
// is this an iPod ?
var isiPod = (navigator.userAgent.match(/iPod/i) != null);
回答by Amir Khorsandi
I've tried all these solutions but didn't work in my case,
I was going to detect Telegraminside Webview.
I've noticed Safari is changing phone style text to a link with "tel:" prefix, so I've used this to write this code, you can test it : jsfiddle
我已经尝试了所有这些解决方案，但在我的情况下不起作用，
我打算在 Webview 中检测Telegram。我注意到 Safari 正在将手机样式文本更改为带有“tel:”前缀的链接，因此我用它来编写此代码，您可以对其进行测试：jsfiddle
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="phone" style="opacity:0">
<li>111-111-1111</li>
</ul>
</body>
</html>
<script>
var html = document.getElementById("phone").innerHTML;
if (navigator.platform.substr(0,2) === 'iP') {
if (html.indexOf('tel:') == -1)
alert('not safari browser');
else
alert('safari browser');
}
else
alert('not iOS');
</script>
回答by Boris Chumichev
Note that this approach does not work for iOS 10 and older versions.
请注意，此方法不适用于 iOS 10 及更早版本。
For the Spring of 2018 none of proposed method worked for me so I came up with a new approach (which is not userAgent based):
在 2018 年春季，没有一个提议的方法对我有用，所以我想出了一种新方法（不是基于 userAgent 的）：
const hasValidDocumentElementRatio =
[ 320 / 454 // 5, SE
, 375 / 553 // 6, 7, 8
, 414 / 622 // 6, 7, 8 Plus
, 375 / 812 // X
, 414 / 896 // Xs, Xr
].some(ratio =>
ratio === document.documentElement.clientWidth /
document.documentElement.clientHeight
)
const hasSafariInUA = /Safari/.test(navigator.userAgent)
const isiOSSafari = hasSafariInUA && hasValidDocumentElementRatio // <- this one is set to false for webviews
https://gist.github.com/BorisChumichev/7c0ea033daf33da73306a396ffa174d1
https://gist.github.com/BorisChumichev/7c0ea033daf33da73306a396ffa174d1
You are welcome to extend the code for iPad devices too, I think it should do the trick.
欢迎您也为 iPad 设备扩展代码，我认为它应该可以解决问题。
Worked well for Telegram, Facebook, VK webviews.
适用于 Telegram、Facebook、VK 网络视图。
回答by eosphere
Neoneye's solution does not work anymore (see comments) and can be simplified. On the other hand, testing only "Safari" in the UA adresses much more than the ios handheld devices.
Neoneye 的解决方案不再起作用（见评论）并且可以简化。另一方面，在 UA 中仅测试“Safari”比 ios 手持设备要多得多。
This is the test i'm using :
这是我正在使用的测试：
var is_ios = /(iPhone|iPod|iPad).*AppleWebKit.*Safari/i.test(navigator.userAgent);
回答by vinni
Working 15.02.19
Working 15.02.19
Another solution for detecting webviews on iOS is checking for the support / existence of navigator.mediaDevices.
在 iOS 上检测 webview 的另一个解决方案是检查navigator.mediaDevices.
if (navigator.mediaDevices) {
alert('has mediaDevices');
} else {
alert('has no mediaDevices');
}
In my case I didn't need to catch all webviews, but those that don't support camera / microphone input (Reminder: Alerts don't trigger in Webview, so make sure to change something in the dom for debug purposes)
在我的情况下，我不需要捕获所有 webviews，但是那些不支持摄像头/麦克风输入的 webviews（提醒：警报不会在 Webview 中触发，因此请确保更改 dom 中的某些内容以进行调试）
回答by Mahmoud D. Alghraibeh
Try With IOS 13
尝试使用 IOS 13
function mobileDetect() {
var agent = window.navigator.userAgent;
var d = document;
var e = d.documentElement;
var g = d.getElementsByTagName('body')[0];
var deviceWidth = window.innerWidth || e.clientWidth || g.clientWidth;
// Chrome
IsChromeApp = window.chrome && chrome.app && chrome.app.runtime;
// iPhone
IsIPhone = agent.match(/iPhone/i) != null;
// iPad up to IOS12
IsIPad = (agent.match(/iPad/i) != null) || ((agent.match(/iPhone/i) != null) && (deviceWidth > 750)); // iPadPro when run with no launch screen can have error in userAgent reporting as an iPhone rather than an iPad. iPadPro width portrait 768, iPhone6 plus 414x736 but would probably always report 414 on app startup
if (IsIPad) IsIPhone = false;
// iPad from IOS13
var macApp = agent.match(/Macintosh/i) != null;
if (macApp) {
// need to distinguish between Macbook and iPad
var canvas = document.createElement("canvas");
if (canvas != null) {
var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (context) {
var info = context.getExtension("WEBGL_debug_renderer_info");
if (info) {
var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
if (renderer.indexOf("Apple") != -1) IsIPad = true;
}
;
}
;
}
;
}
;
// IOS
IsIOSApp = IsIPad || IsIPhone;
// Android
IsAndroid = agent.match(/Android/i) != null;
IsAndroidPhone = IsAndroid && deviceWidth <= 960;
IsAndroidTablet = IsAndroid && !IsAndroidPhone;
message = ""
if (IsIPhone) {
message = "Device is IsIPhone"
}
else if (IsIPad) {
message = "Device is ipad"
} else if (IsAndroidTablet || IsAndroidPhone || IsAndroid) {
message = "Device is Android"
} else {
message = "Device is Mac || Windows Desktop"
}
return {
message: message,
isTrue: IsIOSApp || IsAndroid || IsAndroidTablet || IsAndroidPhone
}
}
const checkMobile = mobileDetect()
alert(checkMobile.message + " =====> " + checkMobile.isTrue)
回答by Vijay Dhanvai
I have found a simple solution to detect iPhone or iPad. This works for me fine.
我找到了一个简单的解决方案来检测 iPhone 或 iPad。这对我来说很好。
var is_iPad = navigator.userAgent.match(/iPad/i) != null;
var is_iPhone = navigator.userAgent.match(/iPhone/i) != null;
if(is_iPad || is_iPhone == true){
//perform your action
}
