為什么我的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; 。 您可以使用.message[origin-me]和.message[origin-them]設置div class="message"的對齊規則，以設置div class="inner"對齊的位置。 我希望這有幫助！