Webpage doesn't scale to viewport width

Question

i'm trying to convert an old webpage to responsive webdesign.

Minimum width is 480 pixels, a desktop version will be added later with breakpoints.

The code so far:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{width:480px;margin:auto}

#wrapper{width:480px}
#header{width:480px;height:100px;text-align:center;background:black;color:white}
#content{width:480px;background:#cfcfcf;height:1000px}
</style>

</head>
<body>

<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>

</body></html>

I expected that the webpage will scale down to my mobile device width (320 pixel) but instead it "overflows" (see screenshot, "HEADER" should be centered):

I thought setting the viewport-meta would fix such problems?!

Of course i could tap on the screen to scale/fit to the webpage really to my device width but it should do this by default.

What did i wrong?

Thanks!

Use width: 100%; max-width: 480px; instead of width: 480px;. — arieljuod

MaKR MaKR · Accepted Answer · 2019-04-23T20:57:59

From: https://www.w3schools.com/css/css_rwd_viewport.asp

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

This means that the device will determine the width, commonly 320px to 360px on most mobile devices. Even though published specs are 1080px wide or wider on many phones they scale the device pixels so they don't offer up desktop versions. Your example is putting 480px wide content on your 320px wide device, so tell your device to be 480px wide with this:

<meta name="viewport" content="width=480, initial-scale=1.0">

I also second the use of width: 100%; min-width: 480px; instead of width: 480px; offered by arieljuod in the comments. He said max-width but I think more appropriately we would use min-width, since you don't want your content smaller than 480px. Lastly check into margins, etc., and box-sizing. This will have a great impact on responsive grid layouts. Look up CSS normalization for more info: https://css-tricks.com/reboot-resets-reasoning/

Webpage doesn't scale to viewport width

1 Answers