【问题标题】:HTML element not stretching to fit full screen when site is mobile网站移动时,HTML 元素不会拉伸以适应全屏
【发布时间】:2021-10-16 15:06:49
【问题描述】:

我已经部署了站点here。一切正常,但如果您将页面缩小到移动设备大小,您会注意到屏幕右侧有一个巨大的空间。不确定它是什么?通常情况下,我不必在这里写帖子,因为有人问过同样的问题,但这次我找不到任何东西。

希望有人可以提供帮助。 HTML 不会扩展到整个页面,即使它的样式说它要达到 100%。如果您需要任何其他详细信息,请告诉我,真的希望有人能提供帮助。

【问题讨论】:

  • 我无法在我的系统上重现该问题(使用 Chrome、Firefox、Edge 测试)。但是当视口宽度> 840px 时会出现水平滚动条。您可能想从弄清楚它的来源开始......
  • 你这里提到的问题是不可重现的。它在我的 Chrome Android 中显示得非常好。似乎没有任何问题。

标签: html css flexbox responsive-design


【解决方案1】:

使用下面的 CSS 并从 html 标签中删除 width: 100vw !important;

img{
   max-width: 100%
}

查看截图https://prnt.sc/1nya57a

【讨论】:

  • 为什么会这样?我添加了它以尝试修复它并忘记将其删除。为什么图片标签最大宽度 100% 可以解决这个问题?
  • 因为你在缩放时没有提到图像上的任何宽度,所以屏幕图像不会缩放
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-10
  • 2011-07-31
  • 1970-01-01
相关资源
最近更新 更多