htmlmobilemobile-websitedevice-width

Handling device-width on a fixed-width website

I have a website that has a fixed width of 1024px and is centered on desktop. On mobile devices, the width should match the size of the phone or tablet.

When using device-width, like this

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

I get following result:

devicewidth

I get the same result using width=1024.

... Which is really confusing, since the user is unable to gather an overview. I don't know why device-width sets the website's viewport to this particular size. I would expect otherwise.

What I'm expecting and what I really want is something this:

expectancy

Question: How do I tell the device to fit the website on the screen exactly?

Solution

  • What you got when remove scale factor from meta tag? And another question: do you want users to zoom (scale) page or not? I shall try better: 

        <meta name="viewport" content="width=device-width" />

    and also:

       <meta name="viewport" content="width=device-width, maximum-scale=1.0" />

    For fitting height and width you can play with those meta:

      <meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />