Handling device-width on a fixed-width website - html

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

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.

Answer 2

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