为什么即使我在Chrome调试工具中更改了视口，网站的宽度也一样？ [英] Why is the width of a website the same even when I change the viewport in Chrome Debug Tools?
问题描述
我正在使用Chrome调试工具的Viewport模拟器。我发现奇怪的是，无论视口宽度如何，Chrome始终会报告相同的像素宽度，并且缩放和DeviceToPixelRation（DPR）都不会改变。 h1 的样式将 width 设置为 100％，并且没有其他代码。我希望当视口宽度改变时，宽度或DPR都会改变。为什么不会发生？
I'm using the Viewport emulator of Chrome Debug Tools. What I find strange is that regardless of the viewport width Chrome always reports the same width in pixels and neither zoom nor the DeviceToPixelRation (DPR) change. Styles for h1 set width to 100% and there's no other code. I'd expect that either the width or DPR will change when the viewport width changes. Why doesn't it happen?
< a href = https://i.stack.imgur.com/tfig3.png rel = nofollow noreferrer>
此处是代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
width: 100%;
background: blue
}
</style>
</head>
<body>
<h1>
Some header text here
</h1>
推荐答案
这是此处：
为提供最佳体验，移动浏览器以桌面屏幕宽度呈现
页面（通常为980px，尽管b $ b因设备而异），然后尝试通过增加字体大小和缩放内容使其适合屏幕来使内容看起来更好。
这意味着用户可能会出现字体大小不一致的情况，用户可能不得不双击或缩小以查看
的内容并与之交互。
To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.
这就是宽度保持不变的原因。浏览器仅按比例缩小整个网页以适合屏幕大小。
That's why you width doesn't change. Browsers simply scale down the entire web page to fit the screen.
使用元视口值width = device-width指示页面
与屏幕的宽度相匹配（与设备无关的像素）。
Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels.
这就是为什么它使用 name = viewport 标签调整宽度的原因。
That's why it adjusts the width with the name="viewport" tag.
这似乎可行：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
有关更多信息，请阅读文档在MDN的视口元标记上。：
For more information, read the docs on viewport meta tag at MDN.:
viewport元标记告诉浏览器，屏幕
的宽度应视为页面的全宽。这意味着无论您使用的设备的宽度为
，无论是台式机还是移动设备。
网站将遵循用户所使用设备的宽度。
The viewport meta tag tells the browser that the width of the screen should be considered the "Full Width" of the page. Meaning no matter the width of the device you are on, whether on desktop or mobile. The website will follow the width of the device the user is on.
这篇关于为什么即使我在Chrome调试工具中更改了视口，网站的宽度也一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
