viewport meta 对元素宽度的影响到底是什么?
What exactly the effect of the viewport meta on elements width?
我看了一个w3school教程关于viewport meta标签,所以他们举了两个例子来解释标签的用法:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
带标签的 first example one without it shows as expected, while the second example 调整智能手机上的图像宽度,使其成为视口宽度的 100%, 对我来说没有意义。为什么将虚拟宽度设置为等于设备宽度进行这种调整,在这两种情况下图像通常不适合整个宽度,因为它设置的 460px 宽度小于我超过 1000px 的设备宽度和更宽的虚拟宽度。
我的第二个问题是关于initial-scale=1,应该不是默认值吧,不声明会有什么不同
感谢您的关注。
查看该页面的 CSS。
img {
max-width: 100%;
height: auto;
}
最大宽度覆盖宽度。
除了昆汀的回答,
如果您将初始比例设置为“1.0”,则网页会以 1 比 1 的比例显示以匹配目标密度的分辨率。
我看了一个w3school教程关于viewport meta标签,所以他们举了两个例子来解释标签的用法:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
带标签的 first example one without it shows as expected, while the second example 调整智能手机上的图像宽度,使其成为视口宽度的 100%, 对我来说没有意义。为什么将虚拟宽度设置为等于设备宽度进行这种调整,在这两种情况下图像通常不适合整个宽度,因为它设置的 460px 宽度小于我超过 1000px 的设备宽度和更宽的虚拟宽度。
我的第二个问题是关于initial-scale=1,应该不是默认值吧,不声明会有什么不同
感谢您的关注。
查看该页面的 CSS。
img { max-width: 100%; height: auto; }
最大宽度覆盖宽度。
除了昆汀的回答,
如果您将初始比例设置为“1.0”,则网页会以 1 比 1 的比例显示以匹配目标密度的分辨率。