Задать вопрос
@bintoll
html

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

Здравствуйте, подскажите пожалуйста как правильно тестировать адаптивные сайты?
Проблема в том что я тестирую и в chrome и в safari и через симуляторы мобильных приложений. И все отлично работает, но когда дело доходит до реального телефона все плывет, самое больное - это шрифты они больше чем должны быть. Прописываю их в пикселях, но ведь при тестировании проблем нет. Вьюпорт прописываю.
Странно, неужели только я с такой проблемой сталкиваюсь(
  • Вопрос задан
  • 3847 просмотров
1 комментарий
Подписаться 24 Оценить 1 комментарий
Решения вопроса 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 монитора с разными разрешениями и ноут, подключенный по сети.
Ответ написан
24 комментария
24 комментария
Пригласить эксперта
Ответы на вопрос 4
Nikulio
@Nikulio
NaN !== NaN
В чем проблема сразу тестировать на телефонах?
Ответ написан
4 комментария
4 комментария
kn1ght_t
@kn1ght_t
* {
max-height: 99999px;
}

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Лидсканнер\парсер для Telegram по поиску заказов по ключевым словам
25 апр. 2024, в 14:26
6000 руб./за проект
Разработать дизайн продающего лендинга
25 апр. 2024, в 14:21
15000 руб./за проект
Шаблон WP - настройка
25 апр. 2024, в 14:07
20000 руб./за проект
Ещё заказы