Тест для ноутбука с высоким разрешением на ноутбуке с низким разрешением
Ситуация:
Работаю над адаптивным сайтом для моей работы. У меня правильно настроены медиазапросы и CSS для моего не-Retina MacBook Pro 2012 года и для экранов iPhone Retina. Но я был в Best Buy, пробуя новый сайт на MacBook Pro с сетчатки глаза, и он брал CSS для экрана сетчатки iphone. Медиа-запрос, который я использую для таргетинга на iphone:
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait) {}
Любые решения, которые я нашел для тестирования сайтов с высоким разрешением на экранах с низким разрешением, включают просто удвоение разрешения и не учитывают медиазапросы.
1) Я использую правильный медиа-запрос для того, что я пытаюсь сделать? 2) (что более важно) Есть ли способ увидеть, как мой сайт выглядит на ноутбуках высокого разрешения?
(Сейчас я не собираюсь выходить за пределы экранов iphone, поскольку у меня нет других устройств для тестирования, и по соглашениям о конфиденциальности я не могу опубликовать сайт. Дайте мне знать, если есть другие критические сегменты кода, которые будут нужно было получить солидный ответ)
Спасибо!
2 ответа
Медиа-запросы выглядят нормально. Тестировать:
- В Firefox: перейдите в Инструменты -> Веб-разработчик -> Адаптивный дизайн. Он обернет вашу веб-страницу оберткой, и вы сможете выбрать разрешение шириной до 1920 пикселей.
- В Chrome: перейдите в Инструменты -> Консоль разработчика. Откройте настройки разработчика (значок шестеренки в правом нижнем углу). Нажмите на раздел "Переопределения". Установите флажок "Метрики устройства" и установите размер экрана, который вы хотите проверить.
- В IE9+ перейдите к инструментам разработчика F12 и перейдите в меню "Инструменты". Вы можете установить разрешение устройства там.
Изменение этих настроек приведет к повторной визуализации страницы и вызову ваших медиазапросов, если они верны.
Вы можете просто использовать эти дополнения для Chrome: https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk или https://chrome.google.com/webstore/detail/troy/hflapaedaljpdhhdcdgkmhgmcncdchca