vw 和 vh 在谷歌浏览器上似乎无法正常工作

迪达斯

我正在尝试创建一个主体填充整个视口的移动站点。我在样式表中写了以下内容

html, body {
  width: 100vw;
  height: 100vh;

  margin: 0;
  padding: 0;
  overflow: hidden;
}

然而,当使用 chrome 开发工具的响应模式时,css 开始做一些奇怪的事情。

截屏

这只是一个浏览器错误,还是我在这里遗漏了什么?

温斯顿·德·格里夫

移动浏览器会自动调整大小和其他一些东西。您可以尝试在页面的 head 元素中添加以下行:

<meta name='viewport' content='width=device-width'>

此行设置视口的设置,即视口的宽度应始终等于设备宽度。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

是否有任何跨浏览器JavaScript可以使vh和vw单元正常工作

100vh 和 100vw 与浏览器窗口的当前大小相比

“vh”和“vw”与屏幕高度无关

IE11中的VW和VH单元无法使用2D转换过渡

如何在一页没有滚动响应的网页上使用vh和vw CSS?

CSS单位-vh / vw和%之间有什么区别?

如何在React Native中使用vw和vh css

如何设置VW和VH值以选择选项

是否可以在 CSS 中同时使用 vw 和 vh?

使用 vw 和 vh 度量调整窗口大小的问题

如何在 JS 中获取 CSS vw 和 vh?

CSS vh和vw:为什么我的div与上面的div重叠?

调整窗口大小后重新计算 CSS @keyframes(100vw 和 100vh)

我可以使用vh和vw指定画布尺寸吗?

CSS:是否广泛支持视图高度(vh)和视图宽度(vw)单位?

CSS:如何使用vw和vh以16/9的比例制作div?

ReactJS计算一个vw和vh中有多少像素

使用vh / vw vpx和Regular PX /%有什么区别?

使用vh和vw单元时CSS位置绝对值失败

100vw 和 100vh 不适用于线性渐变

全屏滑块的图像在窗口调整大小时不会得到100vh和100vw

为什么{{width:“ 100vw”,height:“ 100vh”}}比我的浏览器窗口大?(未应用边距:0)

vh /移动设备上的%单位和键盘

Vuejs:在移动浏览器上为100vh

Angular 2新路由器:浏览器的后退和前进按钮无法正常工作

用vw设置的Divs和过渡值无法平滑缩放。可以解决吗?

Safari 14-min(),max(),clamp()无法与vw和px值一起使用

无法安装谷歌浏览器和libappindicator1

Chrome 100% 宽度和 100 vw 溢出