1

The meta viewport width=device-width doesn't seem to make any difference in my experiments. I made a test page to show you :

my main code is :

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: yellow;
}

.test_box {
    background: red;
    width: 360px;
    height: 50px;
}

.test_image {
    width: 16rem;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 4rem;
    line-height: 6rem;
}

p {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    line-height: 2rem;
}
<!DOCTYPE html>
<head>
    <title> My Project </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/CSS/styles.css">
</head>

<body>
    <div class="test_box"></div>
    <img src="/IMG/ham.svg" alt="image" class="test_image">
    <h1>Header</h1>
    <p>Paragraph</p>
</body>
</html>

When I resize my window on a desktop it behaves the way it should.

But when I upload it to my server and see it on my Huawei p9 lite it doesn't fit. Either I put the viewport meta tag or not. It doesn't change anything !

(see in the pictures... at 1920px wide, 360px wide, and then on my mobile, either with the viewport meta tag or not. You can also see that mydevice.io recongnize my device as 360px wide)

What can I do ? Please help me. Thank you very much !

Turnip
  • 35,836
  • 15
  • 89
  • 111
Henrique Vieira
  • 11
  • 1

3 Answers3

1

Its because you are checking it on domain wido.media and this domain does not contain any meta tag.

To check, open wido.media in your pc browser and view source by right click > view page source or press Ctrl+u

And wido.media open http://www.henriquevieira.com this domain in iframe and henriquevieira.com contain the viewport meta tag so if you open henriquevieira.com in your mobile you can see the difference

RajnishCoder
  • 3,455
  • 6
  • 20
  • 35
0

The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen. This was not perfect!! But a quick fix.

Akarsh ts
  • 39
  • 4
0

You got "fooled" by mydevice.io - if you scroll down on that site you'll notice a thing called CSS pixel-ratio, which in your case will be 3.

Here's an explanation of the pixel ratio

So your device simply is more than 360px wide

Holzchopf
  • 263
  • 1
  • 10