html – 即使我在Chrome调试工具中更改视口,为什么网站的宽度也相同？

我正在使用Chrome调试工具的Viewport模拟器.我发现奇怪的是,无论视口宽度如何,Chrome总是以像素为单位报告相同的宽度,并且缩放和DevicetoPixelRation(DPR)都不会更改. h1的样式设置宽度为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>

解决方法

以下是 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调试工具中更改视口,为什么网站的宽度也相同？

解决方法

相关文章