I've noticed that iOS devices lock the view of your website when you're focused on a form element and change orientation.
I was wondering if there is a way to modify this code already implemented to include the functionality to lose <input>
& <select>
focus on orientation whether landscape or portrait?
Here is the code I have already:
// Fix HTML width issues on device orientation
window.document.addEventListener('orientationchange', function() {
var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (iOS && viewportmeta) {
if (viewportmeta.content.match(/width=device-width/)) {
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=1');
}
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
}
// If you want to hide the address bar on orientation change, uncomment the next line
window.scrollTo(0, 0);
}, false);
Any help would be greatly appreciated, thanks
Eureka!
window.document.addEventListener('orientationchange', function(){
if (window.orientation === 90 || window.orientation === -90){
document.activeElement.blur();
}
else if(window.orientation === 0) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
}
window.scrollTo(0, 0);
}, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.