'Viewport Meta Tags and its CSS components

In a viewport meta tag (as seen below), does the width property ever have a different value other than device-width?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

Thanks in advance.

css


Solution 1:[1]

I tend to use this:

<meta name="viewport" content="width=device-width">

Although I see this is recommended a lot:

<meta name="viewport" content="width=device-width, initial-scale=1">

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Note: don’t use a responsive meta tag if your website isn’t specifically designed to be responsive and work well at that size, as it will make the experience worse.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Areg Nikoghosyan

Related Questions