1

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?

bytecode77
  • 14,163
  • 30
  • 110
  • 141
  • 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: – ares777 Mar 26 '15 at 12:07
  • Apparently, this solves the issue. Post it in the answers and I'll accept it :) By the way, is it possible to also fit the page height, if for instance, the page is far more wide than high? – bytecode77 Mar 26 '15 at 12:11

2 Answers2

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.

Community
  • 1
  • 1
Gjert
  • 1,069
  • 1
  • 18
  • 48
  • This is not the way we understand doing programming. I think we should not use hard-coded values. If we think only about iOS devices, this should be a temporary solution. What about you have so many devices as per Android? – ares777 Mar 26 '15 at 12:20
  • @user3344236 You are correct. Using hard-coded values isn't the best. However, I just set the retina screen as lowest. Everything over the given values will run aswell. However you are correct. I should change the values accordingly. A full list can be found here: http://bjango.com/articles/min-device-pixel-ratio/ – Gjert Mar 26 '15 at 12:25
  • dito. I don't want to use responsive layouts for various reasons and hard-coded widths of current devices are not useful in a few years, or even now considering the vast variety of devices. – bytecode77 Mar 26 '15 at 12:32
  • @bytecode77 Then I would go with `` as suggested by others. May I ask why you dont wish to use responsive layouts? – Gjert Mar 26 '15 at 12:35
  • If you're interested, take a look at my website (http://bytecode77.com) and then you'll discover that the content doesn't qualify for responsive layouts. – bytecode77 Mar 26 '15 at 12:36
  • @bytecode77 I can't find anything that dont qualify. Set max-width and you will not have a problem with images :) Nice content by the way! :) – Gjert Mar 26 '15 at 12:38
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" />
ares777
  • 3,590
  • 1
  • 22
  • 23