Почему мой CSS отображается неправильно на мобильном телефоне? - PullRequest
Новая
       43

Почему мой CSS отображается неправильно на мобильном телефоне?

0 голосов
/ 26 апреля 2019

Я использую хром как на своем ноутбуке, так и на своем iphone.

Я создал простой пример, демонстрирующий проблему: https://s3.us -east-2.amazonaws.com / asteroid-public / test / test.html

Попробуйте просмотреть эту страницу на своем настольном компьютере / ноутбуке.Сообщения отображаются правильно, не перекрывая друг друга.Даже если вы используете DevTools для просмотра страницы, как если бы вы просматривали ее на мобильном устройстве, она все равно отлично работает на ноутбуке.Теперь попробуйте просмотреть его в приложении Chrome на мобильном телефоне.Все сообщения перекрывают друг друга, поэтому их трудно прочитать.

Вот несколько снимков экрана, показывающих разницу:

How it looks on laptop How it looks on mobile

Почему это происходит и как я могу это исправить на мобильном телефоне?

Ответы [ 2 ]

1 голос
/ 29 апреля 2019

Похоже, ваши свойства .chat .message css вызывают это.Я понимаю, что вы пытались сделать, выполнив это: 

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

Однако причина вашей проблемы, похоже, в свойстве display.Надеюсь, это поможет.

.chat .message {
       margin: 4px 16px;
       white-space: nowrap;
       //display: flex;
       //flex-direction: row;
       align-items: center;
       position: relative;
       }
0 голосов
/ 27 апреля 2019

Я предлагаю сделать все 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" выравнивается.Надеюсь, это поможет!

...