Search code examples
androidhtmlcsswidthmeta

Is it possible to have content width set to 100% in the meta tag

Is it possible to have content width set to 100% in the meta tag. For instance instead of a fixed with in pixels. I want to render my page on any screen including mobile devices. Any help would be greatly appreciated.

Thank you

Solution

  • You can't set content percentages in your metatags. The way to responsive design is firstly:

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

    And secondly with media queries:

    @media screen and (max-width: 1200px) {
   div {
      width: 100%;
   }
}

    Where max-width is width of the screen that you want the media query to kick in, and the div is an example of the css 'nesting' that you'll need to preform.

    Note, you'll probably need to create 3 or 4 different media queries so the site looks right in widescreen, normal, tablet, and mobile.