html – Viewport元标签与媒体查询？

概述我很想知道，为了优化您的平台，桌面和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="v 我很想知道，为了优化您的平台，桌面和smarthpones的网站，最好使用：媒体查询或VIEwport元标记？见代码：

<Meta @R_404_6889@="vIEwport" content="wIDth=device-wIDth,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"><Meta @R_404_6889@="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 ----------- */@mediaonly 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”响应式网页设计之类的关键字。还有祝你好运 ！！！

总结

以上是内存溢出为你收集整理的html – Viewport元标签与媒体查询？全部内容，希望文章能够帮你解决html – Viewport元标签与媒体查询？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。