Html 视口元标记与媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11510232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Viewport meta tags vs Media Queries?
提问by Dexter Schneider
I would love to know, to optimize your website for Tablets, desktops and smarthpones, what is best to use: Media Queries or the Viewport meta tags? see code:
我很想知道，要针对平板电脑、台式机和智能手机优化您的网站，最好使用什么：媒体查询或视口元标记？见代码：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vs
对比
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
采纳答案by sheriffderek
i would say that every situation is different... and it is not an either / or situation. the viewport meta tag you have up there would make it so that the website will maintain the 1 to 1 ratio which in a lot of cases is good. however, it also is set user-scalable "no" - and that means that the user will not be able to zoom in etc... sometimes the way ipads and other devices change your site is for the best... (depends)
我会说每种情况都是不同的......而且它不是一种非此即彼的情况。您在那里拥有的视口元标记将使网站保持 1 比 1 的比例，这在很多情况下是好的。然而，它也被设置为用户可缩放的“否”——这意味着用户将无法放大等等......有时 ipad 和其他设备改变你的网站的方式是最好的......（取决于）
the best method i have found is to use media queries and to choose one of 2 dirrections:
我发现的最好方法是使用媒体查询并选择两个方向之一：
- start from small and build up
- start from large and build down
- 从小事做起
- 从大开始，逐步建立
stretch your browser window bigger and bigger (or smaller and smaller) and then when the website gets ugly, (just before) that is your next breakpoint... make the media query there... and repeat. don't pay attention to all of the device sizes --- this way you'll know that no matter what new devices etc come out --- you have engineered it to look nice at every possible size. (when it gets under 320 / i like to just make the site turn into a business card/// better to have readable info for none smart-phones...)
将您的浏览器窗口拉得越来越大（或越来越小），然后当网站变得丑陋时，（就在此之前）这是您的下一个断点...在那里进行媒体查询...并重复。不要关注所有的设备尺寸——这样你就会知道无论什么新设备等出现——你已经设计了它在所有可能的尺寸下看起来都很漂亮。（当它低于 320 时/我喜欢把网站变成一张名片////更好地为没有智能手机提供可读信息......）
then after all this... test on devices and try out different viewport meta tags.
然后毕竟这...在设备上测试并尝试不同的视口元标记。
there are a lot of great articles about it... use keywords like "responsive design" or "adaptive" or "RWD" responsive web design. and good luck !!!
有很多关于它的很棒的文章......使用诸如“响应式设计”或“自适应”或“RWD”响应式网页设计之类的关键字。还有祝你好运 ！！！
回答by SVS
Both are necessary.
两者都是必要的。
Media queriesare used to have different css for different devices its like the if condition for different devices.
媒体查询用于不同设备的不同 css，就像不同设备的 if 条件一样。
Viewportmeta tag is to set tell the device to take the width according to this tag. Its like a reset for devices if its not used device will adjust the layout according to its default settings.
视口元标签是设置告诉设备根据这个标签取宽度。如果未使用的设备将根据其默认设置调整布局，则类似于设备的重置。
回答by Variant
It depends what do you want to achieve.
这取决于你想达到什么目的。
If you want to design for desktop resolution only and have the mobile browser "zoom out"and assume a desktop like resolution than you can use only the viewport meta tags, setting the width to a fixed value.
如果您只想为桌面分辨率设计并让移动浏览器“缩小”并假设桌面分辨率而不是仅使用视口元标记，请将宽度设置为固定值。
If you want a true responsive design you should set the viewport meta tags to device-width and use media queries to plan the layout for different resolutions as you have shown in your code.
如果你想要一个真正的响应式设计，你应该将视口元标记设置为设备宽度，并使用媒体查询来规划不同分辨率的布局，如代码中所示。
