Home / Questions / 73713
Accepted
lromeraj
Asked: 2020-05-28 07:29:00 +0800 CST 2020-05-28 07:29:00 +0800 CST

Why does Google Chrome misunderstand the @media screen orientation rule on mobile devices?

  • 772

The question can be a bit confusing, well, I'm going to explain a little. Turns out he was creating a form, which had certain styles that changed depending on a CSS rule @media( in this case orientation ).

[I am testing all this with the screen in vertical]

When I viewed the page on my iPad everything was displayed correctly, well, well, I took my phone (Android) and opened my page using Google Chrome, and yes, it was also displayed correctly, but the problem comes now, when I click on a <input>to write in him, the browser recognizes the screen as if it were horizontal, but best of all, this only happens to me when I click on a <input>text type <input type="text">, however when I click on a <input>number type <input type="number"> the browser continues to recognize that the screen is in vertical (which is correct) .

After this I made a small example to see the width and height of the browser window in pixels, for this I put two inputsinside a container, one of them of type textand the other of type number. Once I had this ready I started to test it, [the size of the window when loading the page was 1012x1530] , when I clicked <input type="number">the size of the window was reduced to 1012x1033 => it is still vertical , however when I clicked the size of the window becomes de 980x912 => can no longer be recognized as vertical, the width is being greater than the height , which CSSis no longer applying the style that I have set for a screen viewed vertically.

Here are some graphic examples:

This image shows the resolution as soon as the page loads:

In this other one, clicking on the <input type="number">:

And finally by clicking on the<input type="text">

I am also going to leave attached the small script that I made to carry out this example:

<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>
        $(function() {
            setInterval(function() {
                document.getElementById("log").innerHTML = window.innerWidth +'x'+window.innerHeight;
            }, 200); 
        });

    </script>

<style>

    #log {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        text-align: center;
        background: #000;
        color: #fff;
        font-size: 40px;
        padding: 15px;
    }

    #container {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 40%;
        background: #fff;
        padding: 20px;
        margin-top: 30px;
        border-radius: 5px;
        text-align: center;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
    }

    input {
        width: 80%;
        font-size: 30px;
        background: transparent;
        color: #666;
        margin: 10px 0px 10px 0px;
        border: 2px solid #888;
    }

    @media screen and (orientation: portrait) {

        #container {
            width: 100%;
        }
    }

</style>

</head>
<body>
    <div id="log"></div>
    <div id="container">

        <label for="text">Text:</label>
            <input id="text" type="text"><br>

        <label for="number">Number:</label>
            <input id="number" type="number">

    </div>
</body>
</html>

NOTE: this only happens to me (at least as far as I have been able to test) in Opera and Google Chrome (in Android operating systems), however in iOS operating systems this does not happen , it works perfectly with both types of <input>. I have been able to appreciate with my code example, that when testing it on iOS, the dimensions of the screen were not altered .

Thanks for any possible help :)

android

1 Answers

  1. Best Answer

    At last I found a way to solve this problem, although in the example the mention of the tag does not appear <meta name="viewport"in the tests I did if it was and in its attribute content, it is where the error was, having said this I will detail the error and then the solution that I have managed to give:

    The viewport I was using was the following:

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

    The problem was in width=device-widthand in height=device-height, what was causing this was that the size of the screen was updated at all times , that is, when the keyboard was opened to write on it, <input>the width of the screen changed as well as the height of the screen , then there could be two cases, either the screen remains vertical or the screen changes to horizontal ( obviously this would depend on the screen size of the device being used ), for the same reason it does not occur in all devices. Once I knew the problem, I realized that the solution was relatively simple, and this is simply to set an initial height and an initial width (when loading the document), therefore, now when we click on it <input>to type on the keyboard the size of the screen will not change .

    <meta name="viewport" content="width=400, height=500, initial-scale=1">

    That way when the screen is wider than 400 pixels, the browser will stretch the viewport (instead of zooming in) to fit the screen, (exactly the same for height).

    Therefore the width and height must contain the minimum value that your page needs to be seen correctly.

    Hope that helps

    • 3