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

Question

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

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

尝试在 desktop/laptop 上查看该页面。消息正确呈现，没有相互重叠。即使当您使用 DevTools 查看页面时，就像在移动设备上查看一样，它在笔记本电脑上仍然可以正常工作。现在，尝试在手机 phone 上的 chrome 应用程序中查看它。消息都互相重叠，所以很难阅读。

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

为什么会发生这种情况，我该如何在移动设备上解决这个问题？

Answer 1

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

Answer 2

看起来您的 .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;
       }

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

Why does my CSS render incorrectly on mobile?

css

mobile

webkit

google-chrome

flexbox