CODEWITHSUNDEEP
javascripthtmlioscss
jckdnk111
jckdnk111

Reputation: 2378

ios viewport initial-scale not honored after on-screen keyboard

I've got a non-responsive page I need to include via iframe. In order to show the entire iframe I dynamically set the viewport width and scale using javascript. When I'm ready to close the iframe I reset the viewport width and scale to the original values.

Normally this works fine. However, if the on-screen keyboard is opened (e.g. on text input focus) iOS refuses to honor any further scaling. It will honor the viewport resize, just not the initial-scale. Interestingly, if you rotate the device it will eventually honor the initial-scale.

I think this may just be an iOS bug. Any advice would be greatly appreciated.

Upvotes: 0

Views: 533

Answers (1)

jckdnk111
jckdnk111

Reputation: 2378

So it seems the trick is simply to trigger the keyboard again. Once the keyboard opens the viewport scale you set will be honored immediately.

Getting the keyboard to popup is easier said than done. Basically you have to handle a real click event or mouseup event and then trigger a text input focus directly from the click handler (http://jsfiddle.net/DLV2F/87/).

<input>
<p id="click">Click handler</p>
<p id="click-timeout">Click handler setting timeout</p>
<p id="mousedown">Mousedown handler</p>
<p id="mousedown-timeout">Mousedown handler setting timeout</p>
<p id="mouseup">Mouseup handler</p>
<p id="mouseup-timeout">Mouseup handler setting timeout</p>
<p id="extern-click-trigger">Clicking here will trigger click on the first 'Click Handler'</p>
<p id="tap">Virtual 'TAP' handler</p>
<p id="tap-triggering-click">Virtual 'TAP' handler triggering click on the first 'Click handler'</p>

<script>
function focus() {
    $('input').focus();
}
$(focus);
$(function() {
    $(document.body).load(focus);
    $('#click').click(focus);
    $('#click-timeout').click(function() {
        setTimeout(focus);
    });
    $('#mousedown').mousedown(focus);
    $('#mousedown-timeout').mousedown(function() {
        setTimeout(focus);
    });
    $('#mouseup').mouseup(focus);
    $('#mouseup-timeout').mouseup(function() {
        setTimeout(focus);
    });
    $('#extern-click-trigger').click(function() {
        $('#click').click();
    });
    $('#tap').bind('tapone', function() {
        focus();
    });
    $('#tap-triggering-click').bind('tapone', function() {
        $('#click').click();
    });

});
</script

Upvotes: 0

Related Questions