The initial-scale setting for the iOS viewport is not respected when the on-screen keyboard is

Question

The initial-scale setting for the iOS viewport is not respected when the on-screen keyboard is

I have encountered a situation where I need to embed a non-responsive page using an iframe. To display the entire iframe, I adjust the viewport width and scale dynamically through JavaScript. When it is time to close the iframe, I revert the viewport width and scale back to their original values.

Typically, this method works without any issues. However, if the on-screen keyboard pops up (such as when focusing on a text input field) on iOS, the initial-scale setting is ignored. The viewport resize still works, but not the initial-scale adjustment. Interestingly, rotating the device eventually solves the issue and the initial-scale is honored.

My suspicion is that this might be a bug specific to iOS. Any insights or suggestions on how to resolve this would be greatly appreciated.

javascript html ios css

Answer 1

Answer №1

It appears that the solution lies in simply triggering the keyboard once again. When the keyboard opens, the viewport scale you have defined will be immediately honored.

However, bringing up the keyboard is easier said than done. Essentially, you need to handle a genuine click event or mouseup event and then directly trigger a text input focus 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

Answer 2

It appears that the solution lies in simply triggering the keyboard once again. When the keyboard opens, the viewport scale you have defined will be immediately honored.

However, bringing up the keyboard is easier said than done. Essentially, you need to handle a genuine click event or mouseup event and then directly trigger a text input focus 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

The initial-scale setting for the iOS viewport is not respected when the on-screen keyboard is

Answer №1

Similar questions

Tips for executing a series of tasks before a node js process is terminated

Unable to retrieve req.body data, despite having body-parser enabled

What is the best way to utilize flex for resizing items proportionally?

The output produced by ASP.NET remains unaffected by JQuery or JavaScript interference

Adjust the Navbar to be Aligned Completely to the Left and Divide it into 12

Is the functionality of `Promise.all` affected by the browser's restriction on concurrent connections?

Enhancing an Image Gallery using CSS

Acquire an array of Worksheet names in JavaScript by utilizing ActiveX

Maintaining DOM modifications once a link has been clicked and the Back button is pressed

Encountered an import error when using "npm run build", but it runs successfully with "npm start"

Switching the positions of the date and month in VueJS Datepicker

Stretching of images in Safari and Chrome

Urgent dependency alert: calling for a necessity (sequelize) in next.js is a vital element

Unable to Load CSS File with Path in ClojureScript Project

Enhance the appearance of the og:image by applying CSS styling

How can I apply specific styling to certain cells within a table?

Using Jquery to store input values from within <td> elements in an array

The text on the HTML page reads from left to right in a page that

Obtaining Position Coordinates of an Element Linked to an Object in AngularJS $scope

Converting Epoch time to date in NextJS