Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to detect if viewport unit is supported by browser? #91

Open
hqqxxf opened this issue Nov 4, 2017 · 1 comment
Open

how to detect if viewport unit is supported by browser? #91

hqqxxf opened this issue Nov 4, 2017 · 1 comment

Comments

@hqqxxf
Copy link

hqqxxf commented Nov 4, 2017

`

var isBuggyIE = /MSIE [0-9]\./i.test(userAgent);
var isOldIE = /MSIE [0-8]\./i.test(userAgent);
var isOperaMini = userAgent.indexOf('Opera Mini') > -1;
var isMobileSafari = /(iPhone|iPod|iPad).+AppleWebKit/i.test(userAgent) && (function() {
  // Regexp for iOS-version tested against the following userAgent strings:
  // Example WebView UserAgents:
  // * iOS Chrome on iOS8: "Mozilla/5.0 (iPad; CPU OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/39.0.2171.50 Mobile/12B410 Safari/600.1.4"
  // * iOS Facebook on iOS7: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201 [FBAN/FBIOS;FBAV/12.1.0.24.20; FBBV/3214247; FBDV/iPhone6,1;FBMD/iPhone; FBSN/iPhone OS;FBSV/7.1.1; FBSS/2; FBCR/AT&T;FBID/phone;FBLC/en_US;FBOP/5]"
  // Example Safari UserAgents:
  // * Safari iOS8: "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4"
  // * Safari iOS7: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449d Safari/9537.53"
  var iOSversion = userAgent.match(/OS (\d)/);
  // viewport units work fine in mobile Safari and webView on iOS 8+
  return iOSversion && iOSversion.length > 1 && parseInt(iOSversion[1]) < 10;
})();

`

I find this code.But why not use the following method?
`

var div = document.createElement('div')
div.id = 'checkVw'
div.style.width = '50vw'
document.body.append(div)
elemWidth = parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10);
halfWidth = parseInt(window.innerWidth / 2, 10);
console.log("Your browser" + ((elemWidth == halfWidth) ? "" : "does not ") + " support VW and VH");

`

@hqqxxf
Copy link
Author

hqqxxf commented Nov 4, 2017

@rodneyrehm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant