Мой сайт выглядит по-другому на мобильных устройствах
Эта статья была переведена с помощью машинного перевода. Сообщите нам, если найдете ошибки.
Мой сайт выглядит по-другому на мобильных устройствах
Что может быть причиной
ReFlow адаптирует веб-сайты Canva к разным размерам экрана, размещая элементы по вертикали. Поэтому широкие полноэкранные элементы могут изменить размер точно, а в разных браузерах, версиях браузеров и размерах устройств сайт может отображаться по-разному.
Что делать
- Проверьте перекрытия: Выберите элементы в дизайне и измените их размер или обрежьте их так, чтобы их границы не соприкасались.
- Разделите широкие элементы: Замените крупные элементы, занимающие всю ширину, на элементы меньшего размера, которые аккуратно выстраиваются друг под другом.
- Оставайтесь в пределах безопасных полей: Размещайте важные элементы внутри границ безопасных полей.
- Предварительный просмотр на мобильных устройствах: Во время редактирования используйте панель предварительного просмотра на мобильных устройствах. Считайте ее ориентировочной, так как опубликованный сайт может выглядеть по-разному в зависимости от устройства и браузера.
- Группируйте и блокируйте: Сгруппируйте связанные элементы, а затем заблокируйте группу, чтобы они оставались вместе.
Сгруппируйте элементы
Если вы хотите, чтобы определенные элементы располагались вместе, сгруппируйте их. В ином случае при просмотре на мобильных устройствах они могут разделиться.
- Проведите курсором по элементам, которые хотите сгруппировать. Также можно удерживать клавишу Shift и выбирать элементы.
- На плавающей панели инструментов выберите Сгруппировать.
- Чтобы посмотреть, как сгруппированные элементы будут выглядеть на мобильном устройстве, выберите Предварительный просмотр.
- На панели предварительного просмотра нажмите кнопку Мобильная версия, чтобы увидеть макет для мобильных устройств.
В примере ниже показано, как текстовые поля складываются при просмотре на мобильном устройстве.
Информация пригодилась?
Полезно
Не полезно