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

前端之家收集整理的这篇文章主要介绍了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="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”响应式网页设计之类的关键字。还有祝你好运 !!!

原文链接:https://www.f2er.com/html/233578.html

猜你在找的HTML相关文章