我很想知道，为了优化您的平台，桌面和smarthpones的网站，最好使用：媒体查询或Viewport元标记？见代码：
<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和其他设备更改您的网站的方式是最好的…(依赖)
我发现最好的方法是使用媒体查询，并选择2个Dirrections之一：
>从小开始，建立起来
>从大开始，建立起来
拉伸您的浏览器窗口越来越大(或越来越小)，然后当网站变得丑陋，(就在之前)，这是你的下一个断点…使媒体查询那里…并重复。不要注意所有的设备尺寸 – 这样你就会知道，无论什么新的设备等都出来了 – 你已经设计出来看起来不错，每一个可能的大小。 (当它低于320 /我喜欢只是使该网站变成一张名片///更好地为无智能手机的可读信息…)
然后在所有这些…在设备上测试，并尝试不同的视口元标记。
有很多伟大的文章…使用诸如“响应式设计”或“适应性”或“RWD”响应式网页设计之类的关键字。还有祝你好运 ！！！
