CODEWITHSUNDEEP
htmlcssviewportmeta-tags
user31782
user31782

Reputation: 7589

What does "width" do in meta viewport tag?

I read that width in metaviewport tag defines the virtual width of the viewport and then this viewport is scaled up to fill the screen as per the initial-scale. The problem is that I do not see any difference when I change the width = device-width to any other value like width = 600 or width = 1200. Following two versions are rendered same:

width = 600 :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width= 600px, initial-scale = 2">
<style>


    * {
      box-sizing: border-box;
    }
    html, body {      
      height: 100%;
      width: 100%;
     }
     ul {
      list-style: none;
     }
    .container {
      width: 96px;
      height: 96px;
      position: relative;
      border: 1px solid #333;     
    }


</style>
</head>

<body>
<div class="container"> Hello

</div>

</body>
</html>

width = 50 : 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width= 50, initial-scale = 2">
<style>


    * {
      box-sizing: border-box;
    }
    html, body {      
      height: 100%;
      width: 100%;
     }
     ul {
      list-style: none;
     }
    .container {
      width: 96px;
      height: 96px;
      position: relative;
      border: 1px solid #333;     
    }


</style>
</head>

<body>
<div class="container"> Hello

</div>

</body>
</html>

Upvotes: 0

Views: 208

Answers (1)

Quentin
Quentin

Reputation: 943193

Meta viewport is used to help render pages on atypically sized screens.

Chrome on a Windows 7 desktop scaled screen isn't going to support it.

To see any effect you would need to use something like Chrome for Android or Mobile Safari on iOS on a smart phone sized display.

Upvotes: 1

Related Questions