Как смоделировать экран с более высоким разрешением? [закрыто]

95

В настоящее время этот вопрос не подходит для нашего формата вопросов и ответов. Мы ожидаем, что ответы будут подтверждены фактами, ссылками или опытом, но этот вопрос, скорее всего, потребует дебатов, аргументов, опросов или расширенного обсуждения. Если вы считаете, что этот вопрос можно улучшить и, возможно, снова открыть, обратитесь за помощью в справочный центр .

Закрыт 7 лет назад .

Можно ли в браузере тестировать мои веб-сайты с разрешением выше, чем у моих экранов?

Например: у меня экран 1440 x 900, и я хочу протестировать веб-сайт в разрешении 1920 x 1200, 1920 x 1080 и т. Д.

html css resolution

— HappyDeveloper
источник

@deceze на самом деле это очень хорошее предложение. Вся суть таких вещей, как 960.gs, заключается в том, что если вы работаете с размерами пикселей, ваш дизайн везде выглядит одинаково, он просто занимает разное количество экранной площади в зависимости от разрешения экрана. Нет необходимости тестировать горизонтально повторяющуюся графику в высоком разрешении, если вы можете видеть полные 2 с небольшим повторением, чтобы убедиться, что все швы совпадают. Или вы можете просто использовать принцип цикады, чтобы создать что-то более интересное.

— Endophage

1

@Endophage: Я не согласен. Построение должным образом гибких макетов часто дает лучшие результаты, например, в отношении предпочтений размера шрифта пользователя. Необязательно везде выглядеть одинаково, это просто подглядывание.

— You

@ Вы мне еще предстоит увидеть гибкий макет, который изменяет размер шрифта. Обратите внимание, причина того, что фиксированная ширина пикселей хороша, заключается в том, что человеческий глаз изо всех сил пытается сканировать строки на определенной длине (я считаю, что было обнаружено около 20 слов при размере шрифта около 12 пикселей, вы можете найти это сами). Если вы говорите о снижении разрешения телефона, это совсем другая история, но если вы говорите о разрешениях настольного компьютера / ноутбука, если у меня просто большой экран с высоким разрешением и размер окна, я эффективно тестирую разные разрешения.

— Endophage

1

@Endophage: Следовательно, необходимо использовать 40em(или подобное измерение), а не 960pxвашу ширину. Пиксели не будут масштабироваться, когда я решу, что ваш размер шрифта 12 пикселей слишком мал для меня и нажму Cmd- +. Кроме того, размер окна моего браузера составляет всего 960 пикселей.

— You

@ На самом деле, пиксели будут масштабироваться при нажатии, Ctrl/Cmd +потому что это функция масштабирования. Вы можете попробовать это прямо здесь, на SO. Ширина основного раздела контента составляет 960 пикселей. Использование чего-то вроде 40em не будет масштабироваться с разрешением экрана. Используя emразмеры относительно размера шрифта родительского элемента , который наследуется весь путь до 1em / 16px на уровне верхней , если не отменено (и извинениями, оно должно было быть 12pt не точек в моем предыдущем комментарии). Читайте: kyleschaeffer.com/best-practices/…

— Endophage

76

[Изменить: сначала проверьте инструменты разработчика вашего браузера! Как отмечает @SkylarIttner в комментариях, инструменты для тестирования адаптивного дизайна были развернуты с тех пор, как в большинстве браузеров было опубликовано решение ниже. Скорее всего, сейчас это лучший / самый простой вариант.]

Вы могли бы, поправьте меня , если я ошибаюсь, просто создать IFRAME с style="desired width & height"и в src="your/test.site"качестве единственного ребенка <body>. Должен отображать сайт так, как если бы разрешение было заданной шириной / высотой и приводило к полосам прокрутки для его изучения.

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

— Коди Крамрин
источник

5

Почему ... Должен сказать, это гениально. +1

— Mafia

Конечно! Спасибо! ^^

— Оскар Дювеборн

Я не могу тебя отблагодарить!

— Рахман Шариф

1

Спасибо за положительные отзывы, ребята. Приятно знать, когда что-то полезно.

— Коди Крамрин

1

Если это кому-то поможет, вот пример кода, который делает то, что предложил @Cody Crumrine, и является Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>

— Стюарт,

28

Это решение намного быстрее, чем предложенные выше:

http://www.infobyip.com/testwebsiteresolution.php

Он не такой универсальный, как browsershots.org, но намного быстрее (несколько секунд против 45-минутной очереди).

— Кайл
источник

Это неплохой ответ. Однако на этом сайте нет абсолютно ничего, что вы уже не можете сделать самостоятельно, просто изменив размер окна браузера на любом настольном компьютере. ИМХО, ссылки на этой странице для планшетов и телефонов совершенно бесполезны ... потому что на маленьком экране iPod мой сайт шириной 1000 пикселей автоматически изменяется в Mobile Safari, чтобы он отображался идеально.

— Sparky

4

@ Sparky672, я лично не могу изменить размер своего браузера, чтобы он превышал разрешение моего экрана. ОП просил увидеть 1920 на 1440. Может быть, есть способ, но так ли просто, как решение infobyip? Прошу прощения, если я упускаю из виду что-то очевидное (я чувствую, что могу)

— Кайл

2

Спасибо @ Sparky672 и никаких проблем. Но не следует ли вам удалить свой комментарий «этот сайт не предоставляет абсолютно ничего, что вы уже не можете сделать самостоятельно, просто изменив размер окна браузера на любом настольном компьютере», поскольку это неправда?

— Kyle

1

@ Sparky672, а как насчет вертикального?

— Кайл

1

Я использую вертикаль, чтобы увидеть, что находится выше и ниже сгиба. Я комбинирую его со StatsCounter и MouseFlow, чтобы узнать, какой процент аудитории что видит. Я люблю тебя, Спарки! Я думаю, вы неправильно читаете мой тон. И я хотел быть полезным. Никто не будет рассматривать решение, которое я предоставил с 0 голосами и списком комментариев. Но да ладно ...

— Кайл

9

Некоторые идеи:

Используйте масштабирование браузера, 1024x768 50% масштаб = 2048x1536 смоделированное разрешение, я знаю, что Chrome изменяет размер изображений и тому подобное. Все становится трудно читать, но я предполагаю, что вы тестируете размещение и тому подобное.

Также вы можете использовать некоторые программы для создания снимков экрана, чтобы делать скриншоты с разрешением выше обычного (fireshot в Firefox позволил мне сделать это, но у меня были проблемы с памятью при действительно высоких разрешениях, и он больше не бесплатный).

— StrangeWill
источник

6

Одним из решений, возможно, излишним, было бы использование Xvfb : установите желаемое разрешение и глубину цвета, загрузите свою страницу в браузере (ах) и сделайте снимок экрана (а).

— Евгений Константин Динка
источник

4

Попробуйте viewlike.us или screen-resolution.com . Это не все возможные разрешения, но по крайней мере самые распространенные.

Я не пробовал их, но это кажется довольно простым.

— Эдди Ченг
источник

screen-resolution выдает следующее: «Разрешение вашего экрана слишком мало. Выбранное вами всплывающее окно слишком велико для используемого вами разрешения. Разрешение вашего экрана составляет 1440 на 900 пикселей. Всплывающее окно, которое вы пытались открыть, - 1920 пикселей на 1200. "

— HappyDeveloper

вид, как у нас, выдает следующее: «Запрещено. У вас нет разрешения на доступ к / на этом сервере. Кроме того, при попытке использовать ErrorDocument для обработки запроса возникла ошибка 404 Not Found. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Сервер на viewlike.us порт 80 "

— HappyDeveloper

2

Хотя это не скажет вам точное разрешение вашего тестирования, вы можете использовать zoomинструмент в Chrome или FF для уменьшения масштаба. Это даст довольно точное представление о том, как сайт выглядит на экранах с более высоким разрешением.

— Джейсон Дженнаро
источник

2

Если вас устраивает просто статический снимок экрана вашего сайта, я бы порекомендовал http://browsershots.org/

Они дают вам возможность просматривать снимки экрана вашего сайта практически в любой комбинации браузера / ОС, включая возможность указать размер экрана, а также множество других опций.

Стоит сделать закладку.

— Spudley
источник

1

Вы можете попробовать wkhtmltoimage , который может делать скриншоты с произвольным разрешением.

Кроме того, в KDE4 можно увеличивать размер окна сверх размера экрана. Думаю, я тоже видел это в Windows 7. Не уверен насчет других ОС.

— user123444555621
источник

1

IE9 позволяет изменять размер окна браузера до произвольного: нажмите F12 для доступа к инструментам разработчика, перейдите в Инструменты | Измените размер и выберите желаемый размер. Затем используйте какой-нибудь инструмент, который может захватывать окна за пределами экрана, если окно больше вашего экрана. Эта статья, кажется, указывает на то, что Snagit может это сделать. Тогда просто взгляните на отснятую картинку.

— Жако Бриерс
источник