Как тестировать верстку под разные браузеры и экраны?

Question

[littleguga]

Работаю за ноутбуком с довольно небольшим размером экрана с win7, виртуальные машины не потянет.

Как тестировать верстку под разные размеры экрана и браузеры?
Как Вы это делаете(например задача IE9+ и прочие популярные браузеры, а также andoid/ios) - просматриваете в каждом браузере?

Заранее благодарен за информативный ответ!

Comments

[Дмитрий]

crossbrowsertesting.com

Answer 1

[Данила]

Под мобильные устройства тестирую с помощью стандартных функций браузера (Firefox & Chrome это умеет в devtools)
Так же есть такая штука - ami.responsivedesign.is
Доступные размеры:
настольный монитор — 1600 x 992px;
ноутбук — 1280 x 802px;
планшет — 768 x 1024px;
мобильный телефон — 320 x 480px.

Так же есть это - deviceponsive.com
Устройства и доступные разрешения экранов.
Macbook — 1280 x 800
iPad портрет — 768 x 1024
iPad портрет — 1024 x 768
Kindle портрет — 600 x 1024
Kindle альбомная ориентация — 1024 x 600
iPhone портрет — 320 x 480
iPhone альбомная ориентация — 480 x 320
Galaxy портрет — 240 x 320
Galaxy альбомная ориентация — 320 x 240

Ну и мой любимый - quirktools.com/screenfly
Доступно 9 больше чем планшет устройств — от 10" ноутбуков, до 24" мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Есть отдельный переключатель в портретный и альбомный режим, а также опция показа прокрутки.

Comments

[Дмитрий Королёв]

Все эти три сервиса тупо в айфреймах грузят сайт и не имеют абсолютно никаких преимуществ перед эмуляцией в DevTools.

[Данила]

Дмитрий Королёв: да, но есть широкоформатные дисплеи, в отличии от того же DevTools
Человек спросил, я написал, чем проверяю.

[Дмитрий Королёв]

Формат вообще значения не имеет. В devtools можно любое разрешение выставить, хоть 4K: scr.must.pm/photos/screenshots/scr2015-09-30-15-19...

Answer 2

[Дмитрий Королёв]

1) Эмуляция мобильных устройств в devtools в хроме и firefox
2) Эмуляция старых IE в Edge
3) https://www.browserstack.com/

Ну и регулярно вручную смотреть, где есть возможность, да.

Comments

[Drm]

Добавлю, что для галпа удобно использовать browser sync https://github.com/BrowserSync/gulp-browser-sync

[littleguga]

iOS в devtools часто не соответствует действительности, проверял на ipad'e и хром недельной давности(и год назад была проблема с верхней панелью)

[Дмитрий Королёв]

littleguga: поэтому оно и называется "эмуляция". Точные скриншоты можно на том же browserstack.com получить, например.

[azShoo]

Дмитрий Королёв: На браузерстэке, к сожалению, тоже эмуляторы.

[Дмитрий Королёв]

azShoo: если мы говорим о десктопных браузерах, то таки нет - https://www.browserstack.com/question/475
Если о мобильных, то, да, эмуляторы, но совсем не такие. В devtools - кастомизированный айфрейм. У браузерстэка - официальные эмуляторы Android и iOS. https://www.browserstack.com/mobile-browser-emulator

[azShoo]

Дмитрий Королёв: Да, таки вы правы. Касательно десктопов был не прав, каюсь.
Что касается мобилок - тем не менее, даже официальные эмуляторы, увы, часто расходятся с живыми девайсами.

Answer 3

[azShoo]

По девайсам - sauceLabs. Насколько я знаю, они одни из немногих, кто дает живые девайсы, а не эмуляторы.
В остальных случаях - готовьтесь к серьезным погрешностям.

По браузерам - оптимальное решение это виртуалки, нет - browserstack и альтернативы (или упомянутый уже сауслабс).
Использовать девтулс и эмуляторы предыдущих версий (например для IE, как выше советовали) - только для "очень грубой" проверки. Точных результатов там не ждите.

Answer 4

[Фёдор Ананин]

Проверяю вручную. На компе установлены все современные браузеры. iOS проверяю через iPad Mini брата, Android - прошу друзей глянуть :) Windows Phone - своя Люмия 1020. IE7,8,9 не поддерживаю. Но если понадобится - поставлю виртуальную машину и буду там проверять.

Answer 5

[Alexk91]

У Opera есть удобная штука Opera Mobile Classic Emulator
Мобильные браузеры смотрю через него. Остальное руками.

Answer 6

[Мак Алексей]

mobitest.akamai.com/m/index.cgi
Может быть полезен, выдаёт скрины реальных устройств и не требует регистрации.
Был еще один похожий сайт (без регистрации), с дизайном в духе Win98, но увы линк утерян и второй раз я найти его не могу. -_-

Answer 7

[Алексей Николаев]

Адаптивность проверяю через devtools (там, как правило, есть такая возможность, вне зависимости от браузера), а если требуется проверить на iphone, mac или любой девайс, выходящий за рамки эмулирования, пользуюсь Browserstack. Они дают 30 минут тестирования на живых устройствах с настоящими браузерами и ОС (хватает на 10-15 проверок), далее платно, но чтобы не платить, просто регистрируйте аккаунт на фиктивную почту (10minutesmail и подобные сервисы).

Выбор девайсов очень велик, вплоть до версий операционной системы.

Answer 8

[Иван Ермолаев]

Вообще если у вас есть задача "например задача IE9+ и прочие популярные браузеры" то кто то не уточнил требования и скорее всего это будет тот еше гемор..
Лучше всего тестировать конечно на физических устройствах, но не везде есть такая возможность, так что да Browserstack тоже выход ну и devtools конечно.