css - 为什么使用手机时，flex div 中宽度为 25% 的 img 之间存在一些间隙？

Question

抱歉我的英语不好。代码可能描述得更好。

    #wrapper{
       display:flex;
    }
    #wrapper img{
       width:25%;
    }


  <div id="wrapper">
    <img src="https://www.hellocoolguy.com/t/1.png" />
    <img src="https://www.hellocoolguy.com/t/2.png" />
    <img src="https://www.hellocoolguy.com/t/3.png" />
    <img src="https://www.hellocoolguy.com/t/4.png" />
</div>

我有一个使用 display:flex 的 div#wrapper，img 有 25% 的宽度，因此图像可以平铺成一行。在桌面浏览器中没问题，但在某些手机中(或使用 chrome 的 DevTools 模拟)，我可以看到一些图像之间存在差距，如下所示:

当我更改包装宽度时，一些间隙似乎出现/消失了。而且它似乎只发生在移动设备上。桌面浏览器(没有 chrome 的 DevTools 模拟手机)总是显示正确的结果。更重要的是，我发现如果我使用像 codepen ( the code here ) 这样的东西就可以了。使用 codepen 时，甚至可以使用 chrome 的 DevTools 模拟手机。

我不知道如何修改我的代码让手机正常显示。

手机端可能直接看到here

2019.09.27编辑
微信浏览器(以X5浏览器为核心)出现这种情况，可能是圆形像素渲染问题/bug。

最后:
感谢所有帮助过的人。它仍然没有解决，但我会结束它，因为它已经花费了我们这么长时间。

Answer 1

这可能是由于像素舍入方面的一些差异所致。

为确保像素正确舍入，请在 head 中添加以下内容标签:

<meta name="viewport" content="width=device-width, initial-scale=1">

很可能是 Codepen 自动添加了这个标签，这就是您无法在那里重现问题的原因。