CODEWITHSUNDEEP
iosiphoneipadmobile-safariviewport
user773366
user773366

Reputation:

Scaling issue on orientation change with keyboard on for a web page on iOS

To fix the auto scaling issues to render my webpage on an iOS device, I've added the viewport meta tag,

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-  scale=1,user-scalable=no">

and I've added device specific styling through media queries for iPhone and iPad, This fixed the scaling issues on switching between portrait/landscape orientations. The problem now is that when I shift focus to an input field(bringing the keyboard up) and shifting to landscape orientation with the keyboard on(auto scaling happens fine) and when I switch orientation back to portrait mode(with the keyboard still on), the UI gets distorted, i.e., some extra length gets added to the viewport width which either appears as black area or part of the same viewport being repeated again. And if I bring down the keyboard and switch orientations again, the added space gets removed and the UI gets back to normal again. This happens only with the keyboard on. I'm using mobile safari as my browser.

Upvotes: 1

Views: 1030

Answers (1)

Jack
Jack

Reputation: 9388

I've been working with Mobile Safari for years now, and one thing I've learned -- it's so buggy when it comes to orientation changes when an input has focus.

Saying that, here's a small script that might help you out.

window.addEventListener('orientationchange', function(){
    document.body.style.paddingRight = '1px';
    setTimeout(function(){
        document.body.style.paddingRight = '';
    }, 50);
}, true);

This basically forces the browser to reflow/re-calculate the layout, which should hopefully address the situation you're seeing.

Fiddle with an easy to reproduce bug: https://jsfiddle.net/LYn54

Fiddle with the fix: https://jsfiddle.net/gQR4m

Hope this helps!

Upvotes: 1

Related Questions