Ways to reproduce:
- Enable password protection on your responsive website
- Open it on your iPhone → Password page loaded at 100% scale
- Tap the input field → Safari zooms in and brings up the keyboard.
- Input your password and press "done"
- The problem – Index page loaded in a zoomed-in state
Solutions that didn't work:
I tried adding meta-tags:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
and tried replacing bss meta-tags with javascript:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no';
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}}
Possible solutions:
- add "user-scalable=no" to your password page header
- let us control it in settings (where a password is set)
- give us the ability to customize the password page (this one would be the best, I would love this page to look consistent with my website rather than with bss design).
Thank you!
-Vitalii