Як імітувати екран з більш високою роздільною здатністю? [зачинено]

94

Чи є у браузера спосіб перевірити мої веб-сайти в роздільній здатності, що перевищує мої екрани?

Наприклад: у мене екран 1440 x 900, і я хочу протестувати веб-сайт у 1920 x 1200, 1920 x 1080 тощо.

html  css  resolution 
— HappyDeveloper
джерело
@deceze насправді це дуже гарна пропозиція. Вся суть таких речей, як 960.gs, виникає в тому, що якщо ви працюєте з розмірами пікселів, ваш дизайн виглядає скрізь однаково, він просто займає різну кількість нерухомості екрану залежно від роздільної здатності екрана. Немає необхідності тестувати горизонтально повторювані графіки з високою роздільною здатністю, якщо ви бачите повне повторення 2 і трохи, щоб переконатися, що шви вишикуються. Або ви можете просто використати принцип цикади, щоб створити щось більш цікаве.
— Ендофаг
1
@Endophage: Я не згоден. Створення належних розкладів розкладів часто дає кращі результати щодо, наприклад, уподобань щодо розміру шрифту користувача. Дивитись однаково скрізь не важливо, це просто піксельний підгляд.
— Ви
@Ви ще не бачив плавного макета, який змінює розмір шрифту. Зверніть увагу на те, що фіксована ширина пікселів хороша - це те, що людське око намагається сканувати рядки на певну довжину (я вважаю, що було виявлено приблизно 20 слів розміром шрифту приблизно 12 пікселів, ви можете це переглянути самі). Якщо ви говорите про перехід до роздільної здатності телефону, це зовсім інша історія, але якщо ви говорите про роздільну здатність настільних комп'ютерів / ноутбуків, якщо у мене просто великий екран задника з високою роздільною здатністю та розмір вікна, я ефективно тестую на різні дозволи.
— Ендофаг,
1
@Endophage: Звідси необхідність використовувати 40em(або подібне вимірювання), а не 960pxяк свою ширину. Пікселі не масштабуються, коли я вирішую, що розмір вашого шрифту 12px для мене замалий, і натискаю Cmd- +. До того ж, вікно мого браузера ледве становить 960 пікселів, як є.
— Ви
@ Ви насправді пікселі масштабуватимуться під час натискання, Ctrl/Cmd +оскільки це функція масштабування. Ви можете спробувати прямо тут на SO. Розділ основного вмісту становить 960 пікселів в ширину. Використання чогось на кшталт 40em не призведе до масштабування з дозволом екрану. Використовувані emрозміри відносяться до розміру шрифту батьківського елемента, який успадковується аж до 1em / 16px на верхньому рівні, якщо не замінено (і вибачення, у моєму попередньому коментарі це повинно було бути 12pt, а не px). Читати далі: kyleschaeffer.com/best-practices/…
— Ендофаг

Відповіді:

76

[Редагувати: Спершу перевірте засоби розробки вашого браузера! Як зазначає @SkylarIttner в коментарях, інструменти для тестування адаптивного дизайну були розповсюджені з тих пір, як у більшості браузерів, оскільки було опубліковано рішення нижче. Вони, мабуть, найкращий / найпростіший варіант зараз.]

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

Це не так зручно, як використання третьої сторони, якщо вам доводиться його налаштовувати самостійно, але перевага полягає в можливості тестувати локально без підключення до Інтернету.

— Cody Crumrine
джерело
5
Чому ... Треба сказати, це геній. +1
— Mafia
Звичайно! Дякую! ^^
— Оскар Дювеборн
Я не можу вам подякувати!
— Рахман Шариф
1
Дякуємо за всі позитивні відгуки, хлопці. Приємно знати, коли речі корисні.
— Cody Crumrine
1
Можливо, це допоможе комусь, ось зразок коду, щоб зробити те, що запропонував @Cody Crumrine, і це геній !! <iframe src = " сайт to test.com" width = "1024" height = "768"> </iframe>
— Стюарт,
28

Це рішення набагато швидше, ніж запропоновані вище:

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

Він не такий універсальний, як browsershots.org, але набагато швидший (кілька секунд проти 45-хвилинної черги).

— Кайл
джерело
Це не погана відповідь. Однак на цьому веб-сайті немає абсолютно нічого, що ви вже не можете зробити самостійно, просто змінивши розмір вікна браузера на будь-якому настільному комп'ютері. IMHO, посилання на цій сторінці для планшетів та телефонів абсолютно ні до чого ... адже на маленькому екрані iPod мій 1000-піксельний сайт у ширину автоматично отримує розмір Mobile Safari, щоб він відображався абсолютно чудово.
— Sparky
4
@ Sparky672, я особисто не можу змінити розмір свого браузера так, щоб він перевищував мою роздільну здатність екрана. ОП просив побачити 1920 р. 1440 р. Можливо, є спосіб, але чи так просто, як рішення infobyip? Перепрошую, якщо я пропускаю щось очевидне (я відчуваю, що міг би бути).
— Kyle
2
Дякую @ Sparky672 і не проблема. Але чи не слід видаляти свій коментар "цей сайт не надає абсолютно нічого, що ви не можете зробити самі, просто змінивши розмір вікна браузера на будь-якому настільному комп'ютері", оскільки це неправда?
— Kyle
1
@ Sparky672, а як щодо вертикалі?
— Kyle
1
Я використовую вертикаль, щоб побачити, що падає вище і нижче складки. Я поєдную це зі StatsCounter та MouseFlow, щоб побачити, який відсоток аудиторії бачить, що. Я люблю тебе Спаркі! Думаю, ти неправильно читаєш мій тон. І я хотів бути корисним. Ніхто не буде розглядати рішення, яке я надаю, 0 голосами та списком коментарів. Але ну добре ...
— Кайл
9

Деякі ідеї:

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

Також ви можете використовувати деякі програми скріншотів, щоб робити знімки екрана з вищою, ніж звичайна роздільна здатність (пожежа у Firefox, дозвольте мені це зробити, але мали проблеми з пам’яттю з дуже високою роздільною здатністю і більше не є безкоштовною).

— Дивна воля
джерело
6

Одним із рішень, можливо, надмірним, було б використання Xvfb : встановіть бажану роздільну здатність і глибину кольору, завантажте свою сторінку у браузер (и) і зробіть знімки екрана.

— Євген Костянтин Дінка
джерело
4

Спробуйте viewlike.us або screen-resolution.com . Це не всі можливі рішення, але найпоширеніші, принаймні.

Я їх не пробував, але, здається, це досить прямо.

— Едді Ченг
джерело
Екранна роздільна здатність видає це: "Ваша роздільна здатність екрана замала. Вибране спливаюче вікно занадто велике для роздільної здатності екрана, яке ви використовуєте. Роздільна здатність екрана становить 1440 пікселів на 900 пікселів. Спливаюче вікно, яке ви намагалися відкрити, становить 1920 пікселів на 1200. "
— HappyDeveloper
погляд, як ми, видає це: "Заборонено Ви не маєте дозволу на доступ / на цей сервер. Крім того, під час спроби використовувати ErrorDocument для обробки запиту виникла помилка 404 Не знайдено. 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/

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

Цілком варто зробити закладку.

— Спудлі
джерело
1

Можливо, ви захочете спробувати wkhtmltoimage , який може робити знімки екрана з довільною роздільною здатністю.

Крім того, у KDE4 можна збільшити вікно, що перевищує розмір екрана. Здається, я це бачив і в Windows 7. Не впевнений в інших ОС.

— користувач123444555621
джерело
1

IE9 дозволяє змінити розмір вікна браузера до довільного розміру: натисніть F12 для інструментів розробника, перейдіть до Інструменти | Змініть розмір і виберіть бажаний розмір. Тоді скористайтеся яким-небудь інструментом, який може захоплювати позаекранні вікна, якщо вікно більше за ваш екран. Здається, ця стаття вказує на те, що Snagit може це зробити. Тоді просто погляньте на захоплену картинку.

— Жако Бріерс
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.