gpt4 book ai didi

html - 为什么即使我在 Chrome 调试工具中更改视口(viewport),网站的宽度仍然相同?

转载 作者:太空狗 更新时间:2023-10-29 14:17:09 25 4
gpt4 key购买 nike

我正在使用 Chrome 调试工具的视口(viewport)模拟器。我觉得奇怪的是,无论视口(viewport)宽度如何,Chrome 始终报告相同的像素宽度,并且缩放和 DeviceToPixelRation (DPR) 都没有变化。 h1 的样式将 width 设置为 100% 并且没有其他代码。我希望当视口(viewport)宽度改变时,宽度或 DPR 都会改变。为什么没有发生?

enter image description here

enter image description here

代码如下:

<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>

最佳答案

这是来自 here 的引述:

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.

这就是为什么你的宽度没有改变。浏览器只是简单地缩小整个网页以适应屏幕。

Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels.

这就是它使用 name="viewport" 标签调整宽度的原因。

这似乎有效:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

有关更多信息,请阅读文档 on viewport meta tag at MDN. :

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.

关于html - 为什么即使我在 Chrome 调试工具中更改视口(viewport),网站的宽度仍然相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51476628/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com