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

Question

[Кирилл Сапронов]

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

Comments

[Алексей Голягин]

Попробуйте браузер Firefox Developer Edition, там есть вкладка Адаптивный дизайн. Но по моей практике могу сказать следующее: не один стимулятор и т.д. не покажет все в идеале и скорее всего на реальных устройствах все равно будут какие нибудь проблемы (особенно с айфонами и стандартным андройд браузером). Но со временем при верстке вы автоматом научитесь все обходить (ну или почти все)

Answer 1

[Сергей Горячев]

И все отлично работает, но когда дело доходит до реального телефона все плывет, самое больное - это шрифты они больше чем должны быть.

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

-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 монитора с разными разрешениями и ноут, подключенный по сети.

Comments

[Кирилл Сапронов]

Спасибо за развернуты ответ, обязательно попробую, но я не понимаю так сказать прикола его использования.
Как я сейчас делаю, верстаю-> обновляю страницу в мобильном режиме с заданным разрешением->когда все готово - заливаю на сайт и захожу с мобильного.
Вот мне хочется понять почему то что я вижу в хроме в режиме мобильной верстки с определенным экранном частично отличается от того, что я вижу в телефоне с таким же разрешением эрана. Ровно тоже самое с эмуляторами браузеров мобильных телефонов, на них я вижу все так же как и в хроме, а на деле - лажа(
Попробовал, что вы прислали, тоже никакого эффекта, ширифт увиличивается и из-за этого не влезает в строку и переносится на следующую, таким образом все начинает плыть.
Если это поможет делу, могу здесь выложить адрес сайта.

[Сергей Горячев]

Кирилл Сапронов: гуглохромовский эмулятор работает корректно только когда устройство подключено кабелем, там другой режим используется, не помню названия. А браузерные эмуляторы всегда работают к косяками. Это истина, которую нужно просто принять.

[Кирилл Сапронов]

Sergey Goryachev: Т.е. я правильно понял, что используя только компьютер невозможно протестировать адаптивность сайта на телефоне? Я говорю не только о хроме, но и о сафари эмуляторе и даже о эмуляторе ios xcode.

[Сергей Горячев]

Кирилл Сапронов: текст-сайз прописывали куда? Корректно для HTML и body, а не для элемента.

[Кирилл Сапронов]

Sergey Goryachev: Прописывал в * и в html

[Сергей Горячев]

Кирилл Сапронов: да, на 100 процентов корректно с компа не проверить. Хотя если ставить профессиональные эмуляторы может и получится, но с ними много геморроя.

[Сергей Горячев]

Кирилл Сапронов: genymotion посмотрите, это эмулятор мобильных устройств для пк. Используется в разработке мобильных приложений. Я попробовал, но у меня машина слабая. Он ставит виртуалку и там разворачивает девайс.

[Сергей Горячев]

Кирилл Сапронов: и дайте ссылку, уже интересно стало.

[Кирилл Сапронов]

Sergey Goryachev: Хм, даже не знаю что может быть профессиональней Ios симулятора от xcode, который поставляет apple. Но с шрифтами с этими беда какая-то, с чего вдруг они увеличиваются не понятно.
j561404.myjino.ru

[Кирилл Сапронов]

Sergey Goryachev: Насчет этого эмулятора, обязательно посмотрю, а то бред какой-то что мне теперь телефон специально ради этого покупать. Да и вообще как то не верится, что компьютер не может отобразить сайт, как телефон.(

[Сергей Горячев]

Кирилл Сапронов: Честно говоря, я по ссылке вижу только верстку с большими косяками в размерах, а шрифты на айфоне у меня нормальные, точно такие же, как на адаптивном режиме мозиллы.

[Сергей Горячев]

Кирилл Сапронов: Из-за больших блоков сайт не вписывается в экран, появляется скролл, который ломает отображение, но чтобы прям "большие" шрифты, такого не вижу ничего.

[Сергей Горячев]

Кирилл Сапронов: Слишком много косяков, чтобы описать, что конкретно не так. Всё плывет в верстке из-за размеров блоков.

[Кирилл Сапронов]

Sergey Goryachev: Большие шрифты на андройде выводятся. Насчет косяков, даже комментировать не буду, у меня пока тяжело ладиться с версткой. Скролл?
Так я и говорю, проблема в том что в симуляторах ничего не плывет, по ним и ориентировался. У вас на телефоне все отображается так же как и в эмуляторе на мазиле?

[Сергей Горячев]

Кирилл Сапронов: да, на айфоне все также, как в мозилле. Вы бы на своём андройде попробовали почистить кэш что ли. Возможно, у вас стили закэшированы.

[Кирилл Сапронов]

Sergey Goryachev: Да, о кеше забыл, сейчас попробую. Ну раз у вас все так же это успокаивает, значит все в принципе работает почти одинаково на эмуляторах и реальном телефоне. Спасибо вам большое за советы!

[Кирилл Сапронов]

Sergey Goryachev: Подскажите пожалуйста, вы видели вот такую картину? s48.radikal.ru/i122/1611/0b/2761b945ddc4.png

[Сергей Горячев]

Кирилл Сапронов: https://yadi.sk/i/CO5d_YAZzPs4N

[Кирилл Сапронов]

Sergey Goryachev: У мазилы почему-то медиа запросы в тесте адаптивного режима срабатывают гораздо позже, например макс ширина 1000 на 300. Так же в мозиле все ровненько и как нужно, в телефоне опять каша, ну что за бред, прям раздражает уже!((

[Кирилл Сапронов]

Sergey Goryachev: А как такое может быть это вообще поддается логическому объяснению? Что такая разница

[Сергей Горячев]

Кирилл Сапронов: все равно думаю, что у вас что-то кэшируется. Попросите у друзей посмотреть на телефонах разных.

[Кирилл Сапронов]

Sergey Goryachev: Ну согласитесь это же бред полный, каждый раз просить у друзей посмотреть сайт, просто даже тупо, я прям не верю что все верстальщики проверяют свои проекты таким образом.

[Сергей Горячев]

Кирилл Сапронов: От того, что ясоглашусь с вами, ваш телефон не исправится, и ситуация с версткой не станет легче. Я вам сказал, что знал)

[Кирилл Сапронов]

Sergey Goryachev: Спасибо, я вас понял. Я вот сейчас подумал, что даже если бы у меня был телефон, и я бы увидел это своими глазами, проблема бы не решилась, потому как отлаживать сайт через телефон просто невозможно.

Answer 2

[Nikita Shchypylov]

В чем проблема сразу тестировать на телефонах?

Comments

[Кирилл Сапронов]

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

[Nikita Shchypylov]

Кирилл Сапронов: Хахахахаахах
Вопрос : Как правильно тестировать адаптивную верстку?

Два способа : эмулятор и реальный девайс
Эмулятор тебе не нравится
Осталось каменный век только

[Кирилл Сапронов]

Nikita Shchipilov: Вообще то эмулятор мне нравится, другое дело что он работает не так же как и мобильный, я и хочу понять почему, возможно я что-то делаю не так. Я не могу понять, почему эмулятор реагирует на верстку по-другому, не так как реальный телефон.

[dhat]

Кирилл Сапронов: заливать и не нужно, есть browser-sync

Answer 3

[kn1ght_t]

* {
max-height: 99999px;
}

обычно спасает от проблем с увеличенными шрифтами

Comments

[Кирилл Сапронов]

К сожалению не помогло(

[Ankhena]

За счет чего оно спасает?

[Кирилл Сапронов]

Ankhena W: Тоже интересно если честно, у меня не особо большой опыт, но по логике не очень понял на что этот код может воздействовать.

[Сергей delphinpro]

Кирилл Сапронов: а у меня большой опыт. но я все равно не въезжаю в суть сего хака...

[coderisimo]

Вот это меня убивает в CSS часть хаков - просто абракадабра, которую очень трудно понять логически

[kn1ght_t]

Ankhena W: хром на андроиде увеличивает шрифты на элементах с динамической высотой (не заданной в css) , иногда такой хак спасал меня

[Kot Matpockuh]

перформансу капец с этими * селекторами...

Answer 4

[Станислав]

Эмуляторы мобильного устройства в браузерах - это не решение проблемы, так как в итоге в них используется не отдельный движок под ту конкретную модель, которая выбрана для эмуляции, а все тот же десктопный движок, правда передающий другие параметры сайту. Тестирование моб. верстки в полноценном режиме возможно в трех случаях:
С самих устройств.
С эмулятора, предоставляемого самой компанией, которая разрабатывает нужную ОС.
С эмуляторв, аналогичным из предыдущего пункта, к которым предоставляется доступ через интернет различными сервисами. Платно, но полноценно. Как пример, saucelabs.com. Также, есть сервисы с тестированием на реальных устройствах, например - browserstack.com.

Answer 5

[bro-dev]

У меня была аналогичная проблема, text-size-adjust не помогло, и более того я вообще не смог отловить момент когда проблема появляется, почему то на некоторых моих сайтах есть, а на некоторых нет. Я нечего лучше не придумал чем везде где задается размер шрифта просто через медиазапросы с интервалом в 50 пикселей задать его принудительно.