问题
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">
回答1:
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;
}
}
回答2:
Take a look at this, bootstrap has it's own media querys also responsive.
回答3:
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!
回答4:
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.
回答5:
<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 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 . 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
来源：https://stackoverflow.com/questions/54284854/responsive-web-design-by-meta-tag