Как правильно тестировать адаптивную верстку?

Здравствуйте, подскажите пожалуйста как правильно тестировать адаптивные сайты?
Проблема в том что я тестирую и в chrome и в safari и через симуляторы мобильных приложений. И все отлично работает, но когда дело доходит до реального телефона все плывет, самое больное - это шрифты они больше чем должны быть. Прописываю их в пикселях, но ведь при тестировании проблем нет. Вьюпорт прописываю.
Странно, неужели только я с такой проблемой сталкиваюсь(
  • Вопрос задан
  • 3594 просмотра
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
И все отлично работает, но когда дело доходит до реального телефона все плывет, самое больное - это шрифты они больше чем должны быть.

Решение проблемы с увеличением шрифтов на мобильных устройствах.

-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;

А если у меня его нет? Так же, не буду же я при верстке каждый раз заливать сайт на сервер и чекать его с телефона.

Используйте gulp.js, с установленным browserSync, который Вам дает локальный адрес сайта.
Вводите на устройствах 192.168.0.xxx:3000 (адрес выдается browserSync'ом).
И каждый раз при сохранении страницы или изменении файлов CSS или JS страница обновляется.
Вы увидите все возможные косяки, не заливая сайт на сервер.

Также browserSync можно использовать с установленных виртуальных машин с разными браузерами.
У меня на столе стоит 2 монитора с разными разрешениями и ноут, подключенный по сети.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Nikulio
@Nikulio
NaN !== NaN
В чем проблема сразу тестировать на телефонах?
Ответ написан
kn1ght_t
@kn1ght_t
* {
max-height: 99999px;
}

обычно спасает от проблем с увеличенными шрифтами
Ответ написан
lamo4ok
@lamo4ok
Программист
Эмуляторы мобильного устройства в браузерах - это не решение проблемы, так как в итоге в них используется не отдельный движок под ту конкретную модель, которая выбрана для эмуляции, а все тот же десктопный движок, правда передающий другие параметры сайту. Тестирование моб. верстки в полноценном режиме возможно в трех случаях:
С самих устройств.
С эмулятора, предоставляемого самой компанией, которая разрабатывает нужную ОС.
С эмуляторв, аналогичным из предыдущего пункта, к которым предоставляется доступ через интернет различными сервисами. Платно, но полноценно. Как пример, saucelabs.com. Также, есть сервисы с тестированием на реальных устройствах, например - browserstack.com.
Ответ написан
xPomaHx
@xPomaHx
1vs9
У меня была аналогичная проблема, text-size-adjust не помогло, и более того я вообще не смог отловить момент когда проблема появляется, почему то на некоторых моих сайтах есть, а на некоторых нет. Я нечего лучше не придумал чем везде где задается размер шрифта просто через медиазапросы с интервалом в 50 пикселей задать его принудительно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 ₽
Gaskar Group Санкт-Петербург
от 120 000 ₽
Business Grow Москва
от 60 000 до 90 000 ₽