посоветуйте девайс для тестирования кроссплафторменной верстки

[Elflight]

Здравствуйте, товарищи!

Прошу прощения за, возможно, дурацкий вопрос, но какой уж возник

Хочу развиваться в направлении разработки кроссплатформенных сайтов, задумался над тестированием на различных устройствах. Широкоформатный монитор есть, маленький нетбук есть, смартфон есть. Планшета нет, но возникла возможность раздобыть. Но вот какой? С одной стороны, просится iPad. С другой - у него разрешение 1024х768, т.е. такое же, как и у нетбука. Понятно, что тач-интерфейс, другой пул шрифтов и все такое, но все-таки есть сомнение, что на айпаде сайт будет отрисовываться иначе, чем на нетбуке. На андроиде планшетов море, разрешения самые разные, какой выбрать - непонятно... Можно, конечно, пользовться эмуляторами и сервисами тестирования верстки на разных устройствах, но это напряжнее, чем на живом девайсе. Отсюда и вопрос к тем, кто верстает сайты кроссплатформенно: какой планшет выбрать для моей задачи?

Благодарю за ответы.

[wildhind]

во-первых, почитайте ТЗ на разработку сайтов. Айпад упоминается в каждом втором, если не чаще, андроиды упоминаются крайне редко, и то на телефонах.

У айпада разрешение это ерунда. Вот «умный» браузер, который подгоняет ширину страницы под ширину экрана — это да, весело.

Ещё весело — это поддержка css в iOS версии ранее пятой. Пока что это актуально, хотя большинство уже под пятой.

Далее: всякие события вроде mouseover, селекторы :hover — это тоже ведёт себя на айпадах весьма альтернативно. Хотя и не только на айпадах, а вообще на планшетах.

Айпадов для тестирования нужно два: iPad2 и New iPad.

У них серьёзно отличается разрешение экрана, чуть по разному подгоняется ширина, слегка отличается выделение телефонных номеров на странице.

Вообще, Apple нам поднасрала со своей ретиной. Как бы не пришлось пересматривать работу с графикой в ближайшее время. Самые обычные фотки на ретинах отображаются размытыми. Нужно теперь готовить два варианта — обычные и высокого разрешения.

В общем, весёлую вы для себя тему открываете

[SelenIT]

чуть по разному подгоняется ширина

Можно об этом чуть поподробнее? Я был уверен, что вьюпорт как был, так и остался 1024px (в альбомном положении), только сами пиксели стали счетверенными. Это не так и это не связано со шрифтами?

«умный» браузер, который подгоняет ширину страницы под ширину экрана

Это про древнеандроидный браузер "Браузер", который упихивает все тексты в умещающуюся на экран колонку?

[wildhind]

Я пока сама ещё толком не разобралась.

Но суть та, что страница шириной 980px, вполне корректно выглядящая в iPad2, в New iPad растекается до краёв, не оставляя полей.

«умный» браузер, который подгоняет ширину страницы под ширину экрана

Это про древнеандроидный браузер "Браузер", который упихивает все тексты в умещающуюся на экран колонку?

это про большую часть мобильных браузеров.

Сафари же тоже так себя ведёт.

У древнеандроидного, кстати, в этой части проблем почти нет. Он как правило вполне корректно перестраивает страницу.

[SelenIT]

страница шириной 980px, вполне корректно выглядящая в iPad2, в New iPad растекается до краёв

Это по умолчанию так? В <meta viewport> еще никакая магия не закралась?

У древнеандроидного, кстати, в этой части проблем почти нет.

Меня тоже эта его фича лишь радует. Блоки выстраиваются так, как задумал дизайнер, а текст — так, как удобно читать. Согласен с PPK, что хорошо бы всем это перенять)

[wildhind]

страница шириной 980px, вполне корректно выглядящая в iPad2, в New iPad растекается до краёв

Это по умолчанию так? В <meta viewport> еще никакая магия не закралась?

так по умолчанию.

Обнаружили, когда коллега вернулся из штатов с тогда ещё диковинкой (первые дни как вышел New iPad), и стали все свои сайты смотреть на этом чудо-устройстве.

Кое-что выглядело неожиданно.

[SelenIT]

Интересное кино. Постараюсь поизучать тему на досуге (если доживу до этого досуга). До сих пор верил в масштабный коэффициент "двойка", а оказывается, и тут надо доверять, но проверять...

[wildhind]

да этот масштабный коэффициент — тоже палка о двух концах.

Шрифты, рамки и всё прочее, рисуемое браузером — красота.

А вот отмасштабированные фотки — это жесть.

На новом проекте решили ставить специально для ретины фотки высокого разрешения. По device-pixel-ratio в css будем их отлавливать, да просто тупо свойством content для img подменять. Чтобы не скриптеть там, где это не нужно. Должно сработать.

[SelenIT]

Вроде работает, но есть пара нюансов: 1) версия из src картинки всё равно грузится — она, конечно, мелочь по сравнению с хайрезом, но лишний запрос не радует, и 2) картинка автоматом масштабируется лишь при указанных width/height, иначе она оказывается вдвое больше (т.к. CSS оперирует CSS-пикселами, а не экранными)...

[wildhind]

указывать width/height — это естественно.

А вот лишний запрос — действительно не радует. Но как альтернатива — только загрузка картинки уже после определения экрана для всех пользователей, что не есть гут.

[SelenIT]

Придумался вариант без лишнего запроса. Правда, webkit-only. Опера всегда покажет низкое разрешение (возможно, придется подстраховать селектор — -webkit-min-device-pixel-ratio мобильная Опера вроде уже понимает), что лучше чем ничего, но вот мозилловые покажут лишь альт-текст, что хуже (но для мобильной верстки, где доля мозилловых мала — имхо, в ряде случаев сойдет).

указывать width/height — это естественно.

А вот применение их к картинке, подгружаемой через content — не очень. Та же Опера, например, этого не делает. Да и картинки в псевдоэлементах на указание размеров не реагируют (что логично, ведь их в одном псевдике может быть много разных).

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

[Elflight]

Спасибо за информацию!

Два айпада не потяну, куплю с ретиной...