Приложение на PhoneGap, как бороться с фрагментацией?

Question

[Lomoson]

Подскажите, пожалуйста, как тестировать отображение на разных устройствах?
Не могу понять, как нужно верстать...

Comments

[Lomoson]

На данный момент интересует только Android

[Lomoson]

Кто-то пользовался www.keynotedeviceanywhere.com/da-free-product-over... или crossbrowsertesting.com/browsers? Есть подобные сервисы?

Answer 1

[mikenerevarin]

Идёте в хромовский devtools (на десктопе), во вкладке Overrides настроек ставите галку show Emulation, дальше нажимаете на кнопку show drawer рядом с шестеренкой настроек, в нижней вкладке переключаетесь на Emulation. Можно много чего сэмулировать, но это даст примерное представление о том, как страница будет рендерится (я так пониманию в этом и задача), без особенностей и скорости работы JS-а; поддержки html5 и css3 в разных версиях операционок. От себя могу добавить, что много ещё зависит от девайса: например iPhone 4+ внутри phonegap при initial-scale=1 в viewport говорит что размер экрана - 320*480 (568) и devicePixelRatio=2, а мой Meizu MX2 (да и на других телефонах хаотично замечал) - уже реальный размер экрана 800*1280 и тот же devicePixelRatio=2.
С фрагментацией боролся в лоб: обычно верстаю несколько базовых вариантов, ориентируясь на ширину экрана: 320, 480, 540(640), 720(800), 1080(1200), а дальше в зависимости от размеров window.innerWidth динамически подгружал нужный файл стилей. Стили резиновые между друг другом, то есть 320-479 действует 320й, 480-539 действует 480й и так далее.

Comments

[Lomoson]

А когда верстаете несколько вариантов как учитываете dpi? Мне кажется размер иконки на Galaxy S3 и Galaxy S4 должен быть один и у меня с этим проблемы.
Адаптивные макеты верстаю давно, с этим проблем нет, а вот на dpi зациклился

[mikenerevarin]

Честно говоря, никак не учитываю. Были попытки сделать один макет и выставлять initial-scale в зависимости от dpi, но из JS-а его никак не получить (по крайней мере мне не удалось). Мучаться с media-queries в css совершенно не хотелось.

Answer 2

[Сергей Протько]

Берете n девайсов и проверяете. По другому увы никак. Со временем вы будете натыкаться на все больше и больше особенностей мобильных webkit и webkit в целом и вопросов будет возникать меньше.

Comments

[Lomoson]

Думал о таком варианте, но выкидывать ~3к баксов для того, что-бы попробовать пока не могу

[Сергей Протько]

@Lomoson, если просто попробовать - пробуйте. Наверняка у вас найдутся знакомые с нужными девайсами.

Answer 3

[Kuzzy]

Родные iOS эмуляторы на 99% повторяют поведение реального девайса, с андройдом чутка хуже учитывая зоопарк девайсов, но и протестить физически на всех не получится, пару популярных девайсов придется прибарахлить, остальное средствами опять же эмуляторов. А верстать лучше резиново, все размеры в rem и таргетировать основные размеры экранов с помощью media queries.