为什么我的CSS在移动设备上渲染不正确？

Question

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

我创建了一个简单的示例来演示该问题：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"上设置对齐规则。我希望这会有所帮助！