Каков типичный размер окна просмотра на экране 1024x768?

Я разрабатываю веб-приложение и хочу знать наибольший размер (x и y), для которого я могу его разработать.

По состоянию на январь 2008 г. около половины пользователей используют экраны с разрешением 1024 x 278, и, вероятно, менее 10% используют экраны меньшего размера. (Пользователи телефонов и карманных компьютеров являются исключением.) Поэтому мы разрабатываем проект для минимального размера экрана 1024x768.

Однако это размер экрана, и когда мы размещаем наш контент, нам нужно знать размер области просмотра. Есть данные о том, что большинство пользователей максимально развернули браузер, но все равно нужно вычесть место для украшений ОС и браузерного хрома. Люди настраивают свой хром, поэтому единого «правильного» ответа не существует; Я собираюсь установить разумную границу, которая подойдет большинству пользователей.

Я вижу множество дизайнеров, которые говорят, что используют ширина 960 пикселей, потому что она имеет много факторов и может быть разделена поровну, но прежде чем принять решение, я хочу знать максимальный размер, который мне может сойти с рук, тогда я мог бы выбрать использование несколько меньше. Я видел максимальную ширину 960, 974 или даже 990 в кавычках ... мои собственные эксперименты, похоже, показывают, что ширина 1000 работает нормально.

Высоту найти еще сложнее: я обнаружил, что могу разместить вертикальную высоту окна просмотра 595 пикселей в браузерах, которые я пробовал, с типичными настройками ОС и Chrome по умолчанию. Но я не пробовал очень много, и я бы предпочел увидеть более авторитетный источник. Конечно, кто-то еще провел это исследование и сделал это лучше, чем я.

Итак, мой реальный вопрос заключается в следующем: какой максимальный размер окна просмотра я могу спроектировать и ожидать, что он подойдет без полос прокрутки для 80-90% всех пользователей?


person mcherm    schedule 15.01.2009    source источник


Ответы (13)


Сегодня я только что наткнулся на сайт, который ОЧЕНЬ актуален для моего старого вопроса. Судя по всему, Google хочет поделиться своими знаниями о размерах окон браузера. Их новый сервис находится по адресу http://browsersize.googlelabs.com/ и в основном просто показывает вам их данные. на типичных размерах портала браузера.

Примечание. Размер браузера Google Labs сейчас сильно устарел (изображение называется 2009-11-18-day_google_com_100_donate_example.png) и скоро будет закрыт. Google предлагает использовать Google Analytics для определения распределения размера браузера для вашего собственного сайта: http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

person mcherm    schedule 17.12.2009
comment
первое, что пришло мне в голову, когда я увидел ваш вопрос.. но вы уже ответили на него: P - person Stephan Muller; 17.12.2009
comment
Итог (поскольку Google вот-вот закроет размер браузера): кажется, что 975 пикселей — это самое широкое, что вы можете получить, поддерживая 90% пользователей. Чтобы получить 95%, вам нужно уменьшить размер до 825 пикселей. - person Tom; 10.08.2012

Убедитесь, что ваш сайт будет отображаться с разрешением 800 x 600, но сделайте так, чтобы он расширялся, чтобы заполнить любой размер, который есть у пользователя.

Нет ничего более раздражающего, чем серфинг с разрешением 1600x1200 или больше только для того, чтобы натолкнуться на глупый сайт, ширина которого не превышает 700-800 пикселей.

Ознакомьтесь с Человеком в синем для отличного примера того, как обрабатывать изменения размера страницы... http://themaninblue.com/experiment/ResolutionLayout/

Обновление: я нашел хороший сайт, на котором использовалась статистика, чтобы определить, какой процент пользователей может видеть экраны какого размера: http://www.methodologie.com/webcanvas/

person scunliffe    schedule 15.01.2009
comment
Но я не вообще заинтересован в поддержке разрешения 800x600! (Люди со старым оборудованием могут просматривать сайт с полосами прокрутки.) Что касается людей, у которых экраны БОЛЬШЕ, чем 1024x768, я предоставляю способ масштабирования сайта... этот вопрос касается МИНИМАЛЬНОГО размера. - person mcherm; 15.01.2009
comment
затем установите минимальное разрешение 1024x768... Я бы не стал делать меньше, если это приложение из-за ограничений проектора, которые часто выходят из строя при разрешении 1024x768. - person scunliffe; 15.01.2009
comment
ну я имел в виду больше чем 1024x768 - person scunliffe; 15.01.2009
comment
В этом весь смысл этого вопроса. Каков размер области просмотра браузера при запуске AT 1024x768. - person Blair McMillan; 19.01.2010
comment
Это как бы зависит. Если у пользователя есть куча панелей инструментов, размер ограничен... но, по сути, если вы возьмете размер экрана 1024x768 минус хром, у вас останется около 1016x573... но если возможна вертикальная полоса прокрутки, вычтите еще 20 пикселей из ширина для этого. так сказать 995х565... но ИМХО я бы все же очень советовал нежесткую раскладку. - person scunliffe; 20.01.2010

Подавляющее большинство пользователей просматривают Интернет в IE7 в развернутом окне на экране с разрешением 1024x768 и не модифицируют свой браузер. Поэтому я нашел морскую свинку и сделал снимок экрана. Я предположил, что панель задач состоит из одной строки и видима — опять же, поведение по умолчанию — и получил размер окна 1003 x 589. Лично я бы использовал живую область 960 x 560.

person Community    schedule 19.01.2010

Что бы это ни стоило, пользователи XP IE7 с шириной боковой панели по умолчанию, открытой в полноэкранном режиме XGA, получают ширину окна просмотра 862 пикселя. Высота не так важна, поскольку мы ожидаем вертикальной прокрутки, но горизонтальная прокрутка — это смерть.

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

(Что это, переполнение стека? Правда? Шокирует, тск.)

person bobince    schedule 16.01.2009
comment
это очень хороший момент, но мне любопытно, какой процент людей, использующих Vista, используют только 1024x768? Определенно много на XP, но у любого с Vista на ноутбуке, скорее всего, 1280+. я не уверен насчет новых компьютеров Vista, которые используются со старыми мониторами. у кого-нибудь есть статистика по этому поводу? - person Simon_Weaver; 27.01.2009
comment
плюс я уверен, что они уже привыкли к паршивому опыту. заставляет меня неохотно идти на 974 - person Simon_Weaver; 27.01.2009

Сейчас у меня нетбук Acer с разрешением экрана 1024x600. Помните, что мы — растущий сегмент рынка! (или, по крайней мере, постарайтесь, чтобы ваша вертикальная недвижимость не предполагала 768 как минимальную высоту экрана)

person Jimmy    schedule 16.01.2009

Кажется, это было недавно, думал, что упомяну об этом, нашел его, рыская в Интернете...

http://www.nealgrosskopf.com/tech/thread.php?pid= 43

person Micah    schedule 21.06.2010

У меня Firefox открыт с размером (включая хром) 1024x1000. Я не просматриваю на весь экран.

Мой Chrome включает в себя строку меню, панель инструментов навигации (с маленькими значками), панель инструментов закладок, панель вкладок, полосу прокрутки справа и строку состояния внизу.

Мой фактический порт просмотра ровно 1000x843.

person sjstrutt    schedule 16.01.2009

я на экране ноутбука Sony WUXGA (1920x1200).

У меня есть панель задач в левой части экрана, поэтому за вычетом браузерного хрома у меня все еще есть довольно приличные 1831 пиксель. обычно считают, что это хорошо для большинства применений.

Я просто хочу, чтобы stackoverflow обнаружил мой широкий экран и показал мне предварительный просмотр моего ответа в правом столбце.

person Simon_Weaver    schedule 27.01.2009

Просто решил добавить, что в приложении статистики Mint Шона Инмана есть плагин, который отслеживает размер окна, а не разрешение экрана, и учитывает хром браузера в худшем случае. Затем он группирует результаты, так как x% посетителей имеют ширину окна >y% или >z% высоты, что может быть очень полезно для принятия обоснованных решений о конкретном сайте и устраняет некоторые догадки из процесса.

person Community    schedule 14.03.2009

1007 пикселей — это абсолютный максимум, с которым вы можете работать в Internet Explorer (подробности) без горизонтальных полос прокрутки. Но при этом я думаю, что вы не должны стремиться к самому максимуму, если вам это не нужно. Скорее полагайтесь на предположение, что браузеры многих людей не развернуты до максимума.

Размер браузера от Google — отличный инструмент.

person philfreo    schedule 17.12.2009

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

Теперь нам нужно признать растущее количество смартфонов с разными размерами экрана, нетбуков, iMac с широким экраном, сетчаткой, планшетов (Android / Mac) и т. д. и т. д.

Добавьте к этому, что разрыв между прикосновением и постукиванием растет, и последнее уже не является редкостью.

Теперь нам нужны device-specific style with a tap-based UI for handheld devices with fixed browser sizes и fluid-responsive style with mouse-hover effects etc. for desktop computers.

Сегодня это должно стать предметом обсуждения.

В этом смысле ответ на ориг. вопрос не может быть легко дан больше. Очень распространенный экран 1024x768 вполне может быть iPad или уменьшенным окном браузера.

person Nils Sens    schedule 12.05.2014
comment
Что мне действительно интересно, так это то, как учитывать хром (то есть навигационные кнопки / панель и панель оконного менеджера + любые границы и полосы прокрутки). Было бы неплохо увидеть это среднее значение для всех основных браузеров. - person ylluminate; 16.04.2015
comment
Спасибо за редактирование! Оценил! Вы правы насчет "добавленного хрома" :) Было бы хорошо, если бы все браузеры отображали полосу прокрутки внутри, т.е. как ненавязчивую накладку. Оконная рама, конечно, еще одна переменная... - person Nils Sens; 08.05.2015

Все ответы, которые вы уже нашли, вероятно, верны.

Для случайного пользователя (стереотипный: Win XP или Vista, IE6-7, никаких пользовательских скинов), вероятно, подойдет ширина, близкая к 1000px. Если люди модифицировали свои браузеры, не запускали их в полноэкранном режиме или установили собственные скины в своих операционных системах, это число может измениться.

Если бы мне нужно было проектировать для разрешения шириной 1024 пикселя, я бы, вероятно, выбрал ширину, близкую к 980 пикселям. Все зависит от вас, и нет «единственного ответа». Где-то около 960-1000 пикселей, в зависимости от многих вещей.

Когда дело доходит до высоты страницы, не думайте об этом слишком много. Поместите самую важную информацию (навигация, логотип, важный контент) вверху страницы и не бойтесь позволить пользователю прокрутить страницу, чтобы найти остальную часть. Люди привыкли и знают, что должны прокручивать. Это естественное ограничение, с которым никто не ожидает, что вы будете что-то делать.

Для этой наиболее важной информации, вероятно, можно было бы ожидать окно просмотра высотой около 550 пикселей или более.

Таким образом, ~980px * ~550px, вероятно, является более или менее стандартным окном просмотра для использования в качестве отправной точки :-)

person Arve Systad    schedule 16.01.2009

Ширина 960 пикселей — хороший размер, потому что она делится. 1000px будет слишком большим для многих систем. Ширина полосы прокрутки вместе с рамкой составляет примерно 33 пикселя в Vista/Firefox.

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

Мое окно просмотра в Firefox с открытыми вкладками, быстрыми ссылками и отличным расширением панели инструментов для веб-разработчиков составляет всего 572 пикселя при установленном разрешении 1024x768.

Если вы используете панель инструментов веб-разработчика, одной из многих полезных функций является возможность мгновенного изменения размера браузера до любых размеров, для которых вы его настроили: например. 1024x768, 800x600 и т. д. Таким образом, вы можете видеть свой веб-сайт так же, как его увидят посетители с такими размерами экрана.

Веб-разработчикам стоит проверить: https://addons.mozilla.org/en-US/firefox/addon/60

person Community    schedule 10.02.2009