Каков наилучший способ проверить веб-страницу с более высоким разрешением, чем разрешение вашего текущего экрана?

10

Я делаю адаптивный веб-сайт, на котором мне нужно протестировать рендеринг css, html, javascript моей веб-страницы с разрешением 2400 пикселей, в то время как мой экран только 1900 пикселей.

windows display resolution website металлический редуктор
источник
Возможный дубликат Как вы можете сделать скриншот всей веб-страницы?
Ƭᴇcʜιᴇ007
Вы понимаете, что в большинстве систем вы можете изменить размеры окон браузера за пределы разрешения экрана? Просто переместите их на полпути из экрана, а затем измените размер границы, которая теперь находится в середине экрана. Это бесполезно для реального использования, но будет достаточно для тестирования. Этот скриншот полного окна был сделан на OS X с разрешением экрана 1680x150.
Даниэль Бек
@DanielBeck - странно, я пытаюсь сделать то же самое на моем Chomre (Windows), но он не выходит за рамки моего текущего экрана
твердое металлическое устройство
Это действительно проблема, когда ваша ОС пытается вас перехитрить . Может воспроизводить с Safari на Windows 7.
Даниэль Бек
Мой тоже Windows 7
металлическая шестеренка

Ответы:

3

В браузере Chrome:

  1. Нажмите F12. Это откроет DevTools.

  2. Нажмите значок настроек в правом нижнем углу. Это откроет настройки DevTools.

  3. Перейдите в Overrides в левом меню.

  4. Проверьте Включить и Метрики устройства.

  5. Введите разрешение экрана

Я всегда им пользуюсь, это действительно удобно.

Арман Биматов
источник
2

Если вы нажмете Ctrl+ Shift+ Mв последних версиях Firefox, вы войдете в Responsive Design View , который может изменить размер окна просмотра браузера, чтобы он был больше, чем фактический размер экрана. Вы также можете делать скриншоты и моделировать сенсорные события с FF 26 и далее.

Скриншот RDV
Нажмите для полного размера

Возможно, вам будет легче изменить размер после того, как вы уменьшите размер окна - вы можете перетаскивать размеры дальше за один раз. Или просто введите пользовательский пресет из выпадающего списка.

боб
источник
Есть ли API для этой опции? Для того, чтобы включить его с помощью js-кода, введенного либо с сайта, либо из аддона?
Камаль Редди
@KamalReddy Не думаю, что вы сможете сделать это из контекста контента (веб-сайт), но это должно быть возможно из контекста Chrome (аддон). Ну, в любом случае , в будущем . Возможно, вы можете симулировать Ctrl + Shift + M?
Боб
1

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

kamalam
источник
Быть заблокированным нашим прокси-сервером. Это указатель на другой сайт, или эта страница PHP фактическая страница инструмента?
Канадский Люк
страница PHP, которую я добавил здесь, является реальной страницей инструмента
kamalam
0

Этот вопрос, вероятно, больше подходит для веб-мастеров, но я постараюсь ответить на него и предложить ViewLikeUs, который

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

CharlieRB
источник
1
у него только 1920 макс.
металлическое зубчатое колесо
0

Добавьте собственное разрешение экрана на панели управления вашей видеокарты.

GENiEBEN
источник
3
Разрешение больше, чем поддерживается на экране? Не могли бы вы предоставить более подробную информацию о том, как это настроить и как это выглядит?
Даниэль Бек
@DanielBeck Эта ссылка на учебник YouTube предназначена для карточек nVidia. Довольно похоже на ATI / AMD.
GENIEBEN
2
@ElGenieben Это видео явно предупреждает в 0:39, что вы можете повредить дисплей, установив слишком высокое разрешение.
Николь Гамильтон
0

Попробуйте онлайн-тестер разрешения, он предлагает различные разрешения для тестирования вашего сайта, просто введите URL своего сайта, выберите разрешение и проверьте его.

http://www.webestools.com/resolution-tester-screen-size-page-design-test-screen-resolution-website-online-display.html

Надеюсь это поможет!!!

Невиль
источник
0

Просто измените масштаб в вашем браузере, когда вы уменьшаете, по сути, размер вашего окна сообщает все большую и большую ширину вашему приложению.

Пример jsfiddle здесь , просто нажмите на кнопку, посмотрите ширину, которую он сообщает, затем немного уменьшите масштаб и нажмите ту же кнопку - он сообщит о большем размере.

Doobeh
источник
0

Попробуйте пользовательские настройки разрешения в эмуляторе устройства в Google Chrome. Это дает вам больше контроля, чем использование функции масштабирования браузера.

Включите эмулятор устройства и отметьте опцию «увеличить по размеру».

Вручную введите разрешение до 9999 пикселей в ширину (или перетащите края эмулируемого экрана. Эмулированное разрешение будет масштабировано для соответствия вашему собственному окну просмотра.

Вы можете держать низкую высоту разрешения на самом деле, так как вы сможете прокрутить вниз в любом случае. Таким образом, вы можете держать инспектора открытым. Отличный рабочий процесс для веб-разработки!

bramchi
источник