即使我在Chrome调试工具中更改视口,为什么网站的宽度也相同？
Max*_*kyi 7 html css google-chrome-devtools
我正在使用Chrome调试工具的Viewport模拟器.我发现奇怪的是,无论视口宽度如何,Chrome始终报告相同的宽度(以像素为单位),并且缩放和DeviceToPixelRation(DPR)都不会更改.h1设置width为的样式,100%没有其他代码.我希望视口宽度改变时宽度或DPR都会改变.为什么不发生？
这是代码:
<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>
小智 4
这是这里的引用：
为了尝试提供最佳体验，移动浏览器以桌面屏幕宽度（通常约为 980 像素，尽管这因设备而异）呈现页面，然后尝试通过增加字体大小和缩放内容以适应屏幕大小，使内容看起来更好。屏幕。这意味着字体大小可能对用户来说不一致，用户可能必须双击或捏合缩放才能查看内容并与之交互。
这就是为什么你的宽度没有改变。浏览器只需缩小整个网页以适合屏幕即可。
使用元视口值 width=device-width 指示页面匹配屏幕的宽度（以设备无关的像素为单位）。
这就是为什么它用标签调整宽度name="viewport"。
这似乎有效：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
视口元标记告诉浏览器屏幕的宽度应被视为页面的“全宽度”。这意味着无论您使用的设备宽度如何，无论是在台式机还是移动设备上。网站将遵循用户所使用设备的宽度。
| 归档时间： |
|
| 查看次数： |
312 次 |
| 最近记录： |