Handling device-width on a fixed-width website

Question

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:

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:

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

Answer 1

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" />

Answer 2

In order to make a website adaptive and responsive I recommand using

@media screen and (max-width: the max width you want){ }

You can also add this in your . This will make the initial scale 1 and allow for some zooming into 3.

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

You also need to use % instead of pixels on wrap elements. This way it adjust according to your screen.

Here is an example:

• For devices with 0-500px width, run the second CSS code.
• For devices with 500-1600px width, run the first CSS code.

You can also specify for retina using this:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){ }

This is the other example:

/** From 500 - 1600px width **/
@media screen and (max-width: 1600px){
    body {
        background-color: #fff;
    }
}
/** From 0 - 500px width **/
@media screen and (max-width: 500px){
    body {
        background-color: #000;
    }
}

I asked a similar question earlier. You can check it out here.