HTML元素/Body元素缩小后比视口小得多

Question

HTML元素/Body元素缩小后比视口小得多

3

我正在制作我的WordPress网站响应式。我正在处理的页面上有两个图像，我想设置它们的max-width为100％，使它们响应式（这是我在另一个网站上所做的，效果非常好）。然而，我注意到当我在Chrome开发工具中缩小页面时，<html>和<body>元素会缩小到非常奇怪的大小，与视口大小完全无关。以下是在Chrome开发工具中悬停在<html>和<body>元素上的截图：

当然，由于max-width使用百分比值，“定义包含块的最大宽度”，并且这里的包含块（<html>和body）以这种不寻常的方式调整大小，因此当我将图像设置为max-width:100％时，它们基于这些元素的奇怪大小进行调整。

这些元素上唯一的CSS是：

* {
  box-sizing: border-box;
}


body {
  margin: 0;
}

所以我的问题是，<html> 和 <body> 元素的尺寸从哪里获取？

- Maxine Ellah

4个回答

1

html, body{
  margin: 0; padding: 0; width: 100%;
  height: 100%;
  overflow-x: hidden !important;
}

- Movie time

4

最好解释一下你的答案为什么有效。 - undefined

0

我刚刚成功解决了相同的问题。问题在于文本强制设置了视口宽度。你只需要调整字体大小来解决这个问题。

- Noé Gogniat

0

请检查您的浏览器缩放级别是否设置为100%（正常）。

- s89_

@maxine-ellah - 嘿，这个解决方案对你有用吗？ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bob · Accepted Answer

这种行为在Chrome的几个版本前就开始出现了；尝试使用FF（Moz / Firefox）响应式开发工具测试您的站点/屏幕-我的猜测是您会看到您所期望的结果。但这并不一定是Chrome的问题；在我的情况下，它与环境有关。现在我主要使用AEM，如果我在auth模式/禁用模式（或纯粹的auth模式）下进行测试，则会出现此问题。但是，如果我在生产中查看相同的页面=没有问题。因此，我猜测（至少对我们来说）这与CMS或服务器设置有关。我倾向于使用FF响应式开发工具-现在尝试一下，并告诉我们你的体验如何。