CODEWITHSUNDEEP
ipadmobile-safariscaleviewportorientation-changes
peto
peto

Reputation: 1

iPad viewport scaling issues on orientation change after text field focus/blur

I am experiencing a very stubborn iPad-specific bug which I have so far been unsuccessful in finding a solution to. I'm in the process of making a client website responsive. On iPad, the site width is 768px in portrait and 1130px in landscape. I'm updating the viewport meta tag with JavaScript on orientation change; these are the viewport meta tags getting generated by JS:

Portrait: <meta name="viewport" content="width=768,minimum-scale=1, maximum-scale=1, initial-scale=1">

Landscape: <meta name="viewport" content="width=1130,minimum-scale=0.9061946902654867, maximum-scale=0.9061946902654867, initial-scale=0.9061946902654867">

I know there'll be some eyebrow raising at my disabling of user-controlled zoom; however, after much testing, this was the only configuration which consistently worked for orientation changes.

Everything works fine between orientation changes, except during the following scenario:

1) tap to edit any text field in either orientation

2) close virtual keyboard

3) change orientation of iPad

In landscape, layout expands beyond viewport (zoomed in); and in portrait, layout is narrower than viewport (zoomed out). However, if you click on any text field again, proper scale is restored.

I've set up a rudimentary demo of this issue at http://735.es/ipad/. If you go through the steps above on an iPad (not a simulator), the issue should be readily identifiable.

Thank you for any feedback!

EDIT

This is definitely related to the fact that I'm using different scales in the viewport meta tag between orientation changes: when I set landscape viewport width to 1024 (scale of 1), instead of 1130, this issue disappears. Also, I've already tried using the scottjehl/iOS-Orientationchange-Fix.js script with no success.

Upvotes: 0

Views: 1120

Answers (1)

Akash K.
Akash K.

Reputation: 637

I don't know whether it will work or not but I was facing same kind of problem and this script helped me. I found it on internet but don't remember the URL for now but the script.

<script type="text/javascript">
    (function(doc) {

        var addEvent = 'addEventListener',
            type = 'gesturestart',
            qsa = 'querySelectorAll',
            scales = [1, 1],
            meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

        function fix() {
            meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
            doc.removeEventListener(type, fix, true);
        }

        if ((meta = meta[meta.length - 1]) && addEvent in doc) {
            fix();
            scales = [.25, 1.6];
            doc[addEvent](type, fix, true);
        }

    }(document));
</script>

Upvotes: 0

Related Questions