为什么我的CSS在移动设备上呈现错误？

Question

我在笔记本电脑和iphone上都使用了镀铬。

我创建了一个演示问题的简单示例：https://s3.us-east-2.amazonaws.com/asteroid-public/test/test.html

尝试在桌面/笔记本电脑上查看该页面。消息正确呈现，不会相互重叠。即使您使用DevTools查看页面就像在移动设备上查看一样，它仍可在笔记本电脑上正常工作。现在，尝试在手机上的Chrome应用上查看它。消息彼此重叠，因此很难阅读。

以下是一些显示差异的屏幕截图：

为什么会发生这种情况？如何在移动设备上修复它？

Answer 1

看起来你的.chat .message css属性导致了这一点。通过这样做我明白你试图做什么：

     .chat .message {
       margin: 4px 16px;
       white-space: nowrap;
       display: flex;
       flex-direction: row;
       align-items: center;
       position: relative;
       }

然而，导致您的问题的原因似乎是显示属性。我希望有所帮助。

.chat .message {
       margin: 4px 16px;
       white-space: nowrap;
       //display: flex;
       //flex-direction: row;
       align-items: center;
       position: relative;
       }

Answer 2

我建议让所有div class="message"包括一个div class="inner"。通过这种方式，你可以让你的div class="inner"在width: 80%;和display: block;，你的消息有width: 100%;和height: auto;。您可以使用div class="message"和.message[origin-me]设置.message[origin-them]的对齐规则，以设置div class="inner"对齐的位置。我希望这有帮助！