Комментарии 33
Не проще сделать страницу с iframe и переключалками размеров?
Так уже ж и сделано выше ))
А ретино-подобные экраны как имитировать? а реакцию на touch?
Самое простое — в Хроме (ну и в Опере теперь, соответственно) в панели разработки, в настройках есть имитация экранов различных устройств. В том числе и имитация touch. Но это, конечно, все равно не то.
Онлайн сервисами все равно не пользуюсь практически — все решается или ХромоОперой или уж реальным устройством. В крайнем случае можно даже подключить в панели разработки (Хром или Фокс) отладку по USB (но с этим куча проблем обычно).
Если интересно, могу завтра кинуть ссылки. Дома они мне как-то без надобности.
Самое простое — в Хроме (ну и в Опере теперь, соответственно) в панели разработки, в настройках есть имитация экранов различных устройств. В том числе и имитация touch. Но это, конечно, все равно не то.
Онлайн сервисами все равно не пользуюсь практически — все решается или ХромоОперой или уж реальным устройством. В крайнем случае можно даже подключить в панели разработки (Хром или Фокс) отладку по USB (но с этим куча проблем обычно).
Если интересно, могу завтра кинуть ссылки. Дома они мне как-то без надобности.
100%
Это помогает для полного понимания того, что подобные сервисы не отражают полную действительность. Так как метрики шрифтов, размеры контролов, интерпретация meta-viewport,… специфичны для устройств и браузеров. Тоесть в любом случае тестировать нужно на настоящих девайсах.
Это помогает для полного понимания того, что подобные сервисы не отражают полную действительность. Так как метрики шрифтов, размеры контролов, интерпретация meta-viewport,… специфичны для устройств и браузеров. Тоесть в любом случае тестировать нужно на настоящих девайсах.
Я использую вот этот скрипт http://lab.maltewassermann.com/viewport-resizer/
А так вообще конечно лучше хотя бы эмуляторы.
А так вообще конечно лучше хотя бы эмуляторы.
Использую плагин для Хрома для теста верстки: chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Мультитач, жесты и ретина только на реальном девайсе.
Мультитач, жесты и ретина только на реальном девайсе.
Использую Firefox — Ctrl + SHIFT + M. CTRL + [+] меняем pixel ration
Аналогично. Зачем отдельный сервис, когда всё давно уже под рукой (скорее всего автору лень читать документацию по браузрам).
Ещё умиляет у автора, что FF некорректно работает с сайтом, а не сайт кривовато работает с FF :).
Ещё умиляет у автора, что FF некорректно работает с сайтом, а не сайт кривовато работает с FF :).
> CTRL + [+]
Не понял. У меня Ctrl + или — меняют масштаб, не применяя правила для pixel ratio.
Не понял. У меня Ctrl + или — меняют масштаб, не применяя правила для pixel ratio.
ctrl и + (увеличение масштаба) window.devicePixelRatio тестируйте в консоли. jsfiddle.net/HwUGj/embedded/result/ CTRL и + 6 раз
Простие за оффтопик. Да и вообще меня сильно бесит, когда втыкают картинку исключительно из яблочных девайсов. Красиво, хорошо. Но Вы о яблоках пишите или о какой-то другой теме.
Скругленные углы и черная рамка — это может быть кто угодно, например, Самсунг.
Здесь только Эпл. Формы и пропорции запатентованы.
На самом деле я не против эпл. Есть много рекомендаций по выбору объектов для отображение сущности. К примеру посмотрите на рекламу топ брендов: если есть люди — то они разных национальностей и полов; если рекламируется моющее средство для машин — то машины будут разных брендов; в документации по никиевской кросс-платформенной библиотеке на ряду с нокией будут другие брэнды; в модельном бизнесе уводят взгляд с красивого лица одной модели на предмет. Вокруг много подобных примеров.
Этот подход не случаен, он подтвержден многими исследованиями (4,5,8 линк).
Что мешает автору как и читателях вспоминать о этом в других статьях?
На самом деле я не против эпл. Есть много рекомендаций по выбору объектов для отображение сущности. К примеру посмотрите на рекламу топ брендов: если есть люди — то они разных национальностей и полов; если рекламируется моющее средство для машин — то машины будут разных брендов; в документации по никиевской кросс-платформенной библиотеке на ряду с нокией будут другие брэнды; в модельном бизнесе уводят взгляд с красивого лица одной модели на предмет. Вокруг много подобных примеров.
Этот подход не случаен, он подтвержден многими исследованиями (4,5,8 линк).
Что мешает автору как и читателях вспоминать о этом в других статьях?
Кстати, первый сервис на самом деле достаточно полезен, т. к. легко позволяет сделать скриншот дизайна.
НЛО прилетело и опубликовало эту надпись здесь
А мне данные сервисы сейчас оказались как раз кстати. Размер экрана можно действительно менять через плагин в браузере. А вот показать варианты отображения сайта клиенту, удобно через один из этих сервисов.
«Устройства и доступные расширения разрешения экранов»
Исправьте, пожалуйста.
Исправьте, пожалуйста.
Бедные верстальщики от сохи не умеющие запрограммировать пару строк кода. Давно все придумано. PhantomJS.
У Chrome отличный инструментарий: Settings → Overrides.
Можно менять не только разрешения и User Agent, но и ориентацию девайса с геолокацией.
А вообще, самое достоверное тестирование — это иметь на руках девайс.
В тему, вот интересный пример студии Envato.
Можно менять не только разрешения и User Agent, но и ориентацию девайса с геолокацией.
А вообще, самое достоверное тестирование — это иметь на руках девайс.
В тему, вот интересный пример студии Envato.
НЛО прилетело и опубликовало эту надпись здесь
Я провиряю сервисом codecanyon.net или же функциями гугла www.google.com/webmasters/tools/mobile-friendly/?url=. Вот хорошый пример как он будет отображатся видно на этом сайте http://papigutto.com.ua/
Наткнулся случайно на сервис http://quirktools.com/screenfly/, очень удобный, и кастомные разрешение можно делать и много видов устройств.
А есть подобные сервисы для проверки отображения сайта в в 2K и 4K разрешении?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Чем тестировать адаптивный дизайн?