代码之家 › 专栏 › 技术社区 › Max Koretskyi

为什么即使在chrome调试工具中更改视区,网站的宽度也是一样的?

google-chrome-devtools css html

Max Koretskyi · 技术社区 · 6 年前

我正在使用chrome调试工具的视区仿真器。我觉得奇怪的是,不管视窗宽度是多少,Chrome总是以像素为单位报告相同的宽度,而缩放和设备像素化(dpr)都不会改变。用于 h1的样式 set width to 100% and there's no other code.我希望当视窗宽度改变时,宽度或dpr会改变。为什么不发生?


   
    
     
      
       
        
         
          
         
        
        
         
          
         
        
        
         代码如下:
        
        <head>
<meta charset=“utf-8”>
<title>标题</title>
<样式>
*{
边距:0;
填充:0;
}

H1{
宽度:100%;
背景:蓝色
}
</style>
</head>
<正文>
<h1>
此处显示一些标题文本
</h1>
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>

2 回复 | 直到 6 年前

Max Koretskyi 6 年前

这是引自 here :

为了提供最好的体验, 移动浏览器呈现桌面屏幕宽度的页面 (通常是980倍,不过不同的设备),然后尝试使内容看起来更好通过增加字体大小和缩放内容来适应屏幕。这意味着字体大小可能对用户不一致,用户可能必须双击或挤压才能进行缩放以查看和交互内容。

这就是为什么你的宽度不会改变。浏览器只需缩小整个网页以适应屏幕。

使用元视区值width=device width指示页面以与设备无关的像素匹配屏幕宽度。

这就是为什么它用 name="viewport" 标签。

这似乎奏效了:

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

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

视区元标记告诉浏览器屏幕的宽度应视为页面的“全宽”。不管什么意思您所在设备的宽度,无论是台式机还是移动设备。这个网站将遵循用户所在设备的宽度。

D3nj1 6 年前

一个非常简单的解决方案(可扩展的文本大小):

<head>
<meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }

    h1 {
        font-size: 2vw;
        width: 100%;
        background: blue
    }
        </style>
        </head>
        <body>
        <h1>
           Some header text here
        </h1>

这将使文本大小缩放到视区的2%。编辑:使用 vw 格式化也适用于所有具有宽度/高度的内容。