html – Viewport元标签与媒体查询？
发布时间：2020-12-14 22:24:11 所属栏目：资源 来源：网络整理
导读：我很想知道，为了优化您的平台，桌面和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
|
我很想知道，为了优化您的平台，桌面和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”响应式网页设计之类的关键字。还有祝你好运 ！！！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |