Search code examples
htmlcssmobileviewportmobile-website

Viewport meta tag - device width doesn't work

I want my site witch isn't ready for mobile to open on the whole page like in the example in the right side of the image below.

Currently It's looks like the example on the left size and I can't make it work the way I want.

Whe width of the site is 1020 and I use the viewport meta tags like:

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

But it doesn't work and I never see this work on mt device.

Any idea how I can make it open the way I want it to open? (Zoomed out)

Zoom problem

Solution

  • If your website is not mobile friendly you should not enter initial-scale value, or remove meta viewport and you website should look as you want.

    Solution 1:

    Remove <meta name="viewport">. However I would not recommend this, because default viewport width on different devices is different, and your website will probably lose margins.

    Solution 2:

    Specify only width in <meta name="viewport">, like this: <meta name="viewport" content="width=1020">, this will make your website look "zoomed out" in the right way on all devices.