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 :

```css
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;
}
```

```html
<!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](https://i.stack.imgur.com/G04VX.jpg), [360px wide](https://i.stack.imgur.com/gF0iO.jpg), and then [on my mobile, either with the viewport meta tag or not](https://i.stack.imgur.com/v9Q2X.png). You can also see that mydevice.io recongnize my device as [360px wide](https://i.stack.imgur.com/4pjPT.png))

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