replace iOS userAgent test with browser feature test
MODIFY
www/pluginInit.js
www/pluginInit.js
@@ -63,16 +63,23 @@ function pluginInit() {
var viewportTagContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';
- // Detect if iOS device
- if (/(iPhone|iPod|iPad)/i.test(window.navigator.userAgent)) {
- // Get iOS major version
- var iosVersion = parseInt((window.navigator.userAgent).match(/OS (\d+)_(\d+)_?(\d+)? like Mac OS X/i)[1]);
- // Detect if device is running >iOS 11
- // iOS 11's UIWebView and WKWebView changes the viewport behaviour to render viewport without the status bar. Need to override with "viewport-fit: cover" to include the status bar.
- if (iosVersion >= 11) {
+ //
+ // Detect support for CSS env() variable
+ //
+ var envTestDiv = '<div id="envTest" style="margin-top:-99px;margin-top:env(safe-area-inset-top);position:absolute;z-index:-1;"></div>';
+
+ document.body.insertAdjacentHTML('afterbegin', envTestDiv);
+
+ var testElement = document.getElementById('envTest');
+ var computedStyles = window.getComputedStyle(testElement);
+ var testResult = computedStyles.getPropertyValue('margin-top');
+
+ document.body.removeChild(testElement);
+
+ // if browser supports env(), returns a pixel value as string, even if 0px
+ if (testResult != '-99px') {
viewportTagContent += ', viewport-fit=cover';
}
- }
// Update viewport tag attribute
viewportTag.setAttribute('content', viewportTagContent);

replace iOS userAgent test with browser feature test