Menu
I am playing around with viewport and tried to do a width of 520, but it seems to do device-width instead. Any ideas?
<html>
<head>
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
h1
{
width: 980px;
border: 1px solid red;
}
h2
{
width: 520px;
border: 1px solid green;
}
h3
{
width: 320px;
border: 1px solid green;
}
</style>
</head>
<body>
<h1>I am a big heading 980px wide. Yes I am</h1>
<h2>I am a big heading 520px wide. Yes I am</h2>
<h3>I am a big heading 320 wide. Yes I am</h3>
</body>
356
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum Viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the Viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
This was derived from this LINK.
So I am assuming that in your case too since you have set the html tags width to more than 520px the browser is taking the 520px width as minumum width and working upwards from there to render the larger tags.
120
answered Oct 23 '25 21:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With