Responsive web design by meta tag

Question

I want to know is there any way to have responsive web design except using this meta tag :

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

Possible duplicate of [How to implement responsive web design and its best practices](https://stackoverflow.com/questions/16959848/how-to-implement-responsive-web-design-and-its-best-practices) — Kamalesh M. Talaviya, Jan 21 '19 at 07:08

score 2 · Answer 1 · answered Jan 21 '19 at 07:07

Below meta tag will just reset initial scale to 1 and width to device width

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

you can however use media query for responsive web design

like for ex

@media only screen and (min-width: 769px) and (max-width: 1281px) { 
    h1{
        color: red;
    }
}

score 0 · Answer 2 · answered Jan 21 '19 at 08:56

0

Take a look at this, bootstrap has it's own media querys also responsive.

answered Jan 21 '19 at 08:56

Antonios Lampros

93
2
12

score 0 · Answer 3 · answered Jan 21 '19 at 10:53

No. HTML needs this meta tag for creating the page a responsive page. There is no other method in css. But, you can create the responsive page by JS. You have to write different css code for different resolution and on page load you can calculate the width of the page and load specific css file required for that particular resolution.

Although it is not a ideal way for responsive page.

Thanks!

score 0 · Answer 4 · answered Jun 11 '19 at 07:20

The viewport meta is the element which turns a regular site to responsive web design. Without the viewport meta tag, the page is displayed as a typical desktop screen even in the mobile device. So using the tag is a must if you want the site to be responsive in all the devices.

score 0 · Answer 5 · edited May 18 '20 at 06:51

<meta name="viewport" content="width=device-width"> tag (originally Apple-proprietary) actually makes the layout viewport fit the device exactly.

Now what is the layout viewport? It’s the area (in CSS pixels) that the browser uses to calculate the dimensions of elements with percentual width, such as div.sidebar {width: 20%}. It’s usually quite a bit larger than the device screen: 980px on the iPhone, 850px on Opera, 800 on Android, etc.

If you add <meta name="viewport" width="device-width">, the width of this layout viewport is constrained to the device width in device pixels; 320 of them in the iPhone’s case.

That matters if your pages are narrow enough to fit in the screen. Take this page without any CSS width statement and without the <meta> tag. It stretches over the full available width of the layout viewport.

This is probably not what you want. You want to fit the text nicely on the screen. That’s the task of <meta name="viewport" width="device-width">. When you add it, the layout viewport is contracted (to 320px in the case of the iPhone), and the text fits.

Source: A pixel is not a pixel is not a pixel

KJ Sudarshan · Answer 6 · 2020-08-31T03:53:53.463

The following solution provides responsiveness without using the viewport meta tag, but is not recommended.

Use @media queries with min-device-width or max-device-width instead of min-width or max-width

Example using mobile-first approach:

//CSS Rules to apply when screen size < 960 px ( Your mobile rules go here )

@media screen and (min-device-width: 960px) {

//CSS Rules to apply when screen size > 960px 

}

Unless you have a strong reasoning always use <meta name="viewport" content="width=device-width,initial-scale=1"> tag.

Responsive web design by meta tag

6 Answers6

Linked