视口元标记与媒体查询？ [英] Viewport meta tags vs Media Queries?

问题描述

我很想知道，为了优化您的网站平板电脑，桌面和smarthpones，最好使用：媒体查询或视口元标记？请参阅代码：

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 */
}

推荐答案

我会说，每一种情况都不同...而且它不是一个/或情况。您在那里拥有的视口元标记将使得网站将维持1：1的比例，在很多情况下是好的。然而，它也设置用户可扩展的否 - 这意味着用户将无法放大等...有时ipad和其他设备更改您的网站是最好的方式...（依赖）

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)

我找到的最好的方法是使用媒体查询和选择以下两个方向之一：

the best method i have found is to use media queries and to choose one of 2 dirrections:

1. 从小范围开始建立


2. 从大范围开始建立

伸展你的浏览器窗口越来越大（或更小和更小），然后当网站变得丑陋，（就在之前），这是你的下一个断点...使媒体查询...并重复。不要注意所有的设备大小---这种方式你会知道，无论什么新的设备等出来---你已经设计它看起来不错，在每一个可能的大小。 （当它低于320 /我喜欢只是使网站变成一张名片///更好的无可读信息的智能手机...）

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...)

然后在所有这...在设备上测试，并尝试不同的视口元标记。

then after all this... test on devices and try out different viewport meta tags.

有很多伟大的文章它使用关键字，如响应设计或自适应或RWD响应网页设计。祝你好运！

there are a lot of great articles about it... use keywords like "responsive design" or "adaptive" or "RWD" responsive web design. and good luck !!!

这篇关于视口元标记与媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！