Firefox响应式设计模式启用触摸时出现多余空白问题

该代码在常规浏览器环境中运行正常，但在Firefox响应式设计模式启用触摸模拟时，页面底部会出现一处空白，禁用触摸模拟后问题消失：

复现代码 #

<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <img style="height: 100vh" src="https://www.pixelstalk.net/wp-content/uploads/2016/08/Download-Full-HD-Wallpapers-1080p-Free-620x349.jpg" />
  </body>
</html>

解决方法 #

为图片添加以下CSS样式即可修复问题：

width: 100%;
object-fit: cover;

疑问解答：为什么必须设置width:100%？ #

• 启用Firefox触摸模拟时，浏览器会模拟移动设备的视口逻辑。此时仅设置height:100vh的图片会保持自身原始宽高比，如果图片的宽高比和当前视口宽高比不匹配，图片宽度会小于视口宽度，导致页面出现横向滚动空间。浏览器为适配触摸操作的视口计算规则，会在底部额外生成空白区域。
• 设置width:100%后，图片会强制铺满视口宽度，再通过object-fit:cover保证图片在填充容器时保持比例不变、不拉伸变形，此时图片尺寸完全适配视口，不会触发浏览器额外的视口计算，底部空白自然消失。

内容的提问来源于stack exchange，提问作者BillTheKid