Какова стандартная ширина веб-сайта в пикселях?

Какова стандартная ширина для веб-сайта в пикселях или где есть статистика?

22 голоса | спросил JPJedi 19 Jpm1000000pmWed, 19 Jan 2011 17:51:04 +030011 2011, 17:51:04

12 ответов


23

Нет стандарта, несмотря на то, что большинство разработчиков считают стандартным 1024x768.

Существует сетка CSS с именем 960grid, которая предполагает ширину тела как 960px, затем разбивает столбцы в 96 столбцах с 10px или 80 с 12px.

Проблема в том, что экраны ПК становятся все больше и больше всегда, медленно в некоторых регионах, но есть.

С другой стороны, на tech-вершинах у вас меньше экранов на мобильных устройствах и нетбуках.

Работа с этой реакцией может быть болезненной. Для спасения есть запросы CSS Media. Кроме того, вы можете использовать ссылку на теги (с rel handheld), чтобы предоставить альтернативную версию мобильным устройствам.

Следуйте ссылкам для ссылок

ответил Dave 19 Jpm1000000pmWed, 19 Jan 2011 20:38:42 +030011 2011, 20:38:42
18
  

Какова стандартная ширина для веб-сайта в пикселях?

Любое число больше 0 и меньше бесконечности.

Современные рекомендации для адаптивного веб-дизайна (RWD) - поддерживать каждое устройство независимо от его ширины в пикселях. Обычно это связано с использованием медиа-запросов для предоставления разных стилей для разных диапазонов размеров экрана. Фактические диапазоны используются меньше, чем дизайн, согласованный по размерам, и функциональность сайта, поддерживающая размеры.

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

Используются некоторые общие диапазоны ширины:

  • дополнительный маленький : 0-480
  • маленький : 480- 768
  • средний : 768-1024
  • большой : 1024-1200
  • сверхбольшой : 1200 +

Эти диапазоны настолько распространены, что я бы сказал, что они практически стандарт. Не все диапазоны должны использоваться, например, сайт может быть шириной жидкости для чего-либо ниже 768, а затем фиксированной ширины и центрированной для 768 +.

При всем том, помните, что используемые вами номера не имеют особого значения, пока сайт функционирует на любом устройстве, которое пользователь выбирает для просмотра.

  

где находятся статистические данные?

Теперь к сложной части, фактические данные. Если вы перепроектируете сайт, единственные данные, которые имеют значение, являются вашими собственными. То, что говорит Wikipedia или Stack Overflow, или Google, или любые другие-крупные-веб-сайты, которые могут быть перечислены-аналитическими данными, не имеет отношения к вашим данным для вашего сайта .

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

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


Старая, устаревшая версия для RWD для азартных игр

Я удивлен, что никто больше не подумал упоминать размер браузера Google .

Что касается стандартов:

80% зрителей могут обрабатывать ширину до 1000 пикселей, но те, которые могут обрабатывать ширину более 1000 пикселей, часто не работают. С широкоэкранными мониторами многие пользователи будут выравнивать свои окна на половину экрана. Теперь, когда Win7 поддерживает drag-n-dock, он, вероятно, станет еще более популярным.

Что касается высоты: ваше первое впечатление от пользователя находится в верхней части страницы до ~ 600 пикселей. Тем не менее, большинство пользователей знают и ожидают, что контент упадет «ниже складки» и будет иметь возможность прокручивать.

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

~ 960px имеет стандартную ширину, но на самом деле это зависит от содержимого и стиля.

ответил zzzzBov 21 Jam1000000amFri, 21 Jan 2011 04:55:21 +030011 2011, 04:55:21
3

В прошлом году я сделал небольшой тест с помощью Google Analytics, чтобы узнать, что такое средняя ширина внутреннего браузера и высота (что фактически видят пользователи).

ответил martin 14 MarpmWed, 14 Mar 2012 15:34:19 +04002012-03-14T15:34:19+04:0003 2012, 15:34:19
2

Как говорили другие, для этого нет никаких стандартов. Хотя, вот несколько советов, которые сделают или заблокируют ваш сайт:

Я всегда использовал либо проценты, либо сборку наихудшего сценария: наименьшее разрешение экрана, с которым вы обычно сталкиваетесь, составляет 800x600, и даже это редко. Все, что ниже этого, возможно, находится на мобильном устройстве. Ширина 775px - это хороший инструмент для использования, или просто 80%, если вы знаете, что ваш сайт по-прежнему будет привлекателен, когда его масштабируют на более крупный экран. Наиболее распространенными проблемами являются то, что текстовое содержимое (при масштабировании до ширины 1600 пикселей) кажется пустым и коротким. Наличие вашего сайта до ширины 775 пикселей будет исправлять это, однако оно может выглядеть не очень хорошо с массивным открытым пространством с обеих сторон.

НИКОГДА не делайте, чтобы ваши пользователи прокручивались влево или вправо. Сокращение содержания сторон - это самый быстрый способ потерять потенциальных клиентов или читателей.

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

И только кончик контента; либо имеют высокую графику /низкую информацию, либо высокую информацию /низкую графику. Попытка сочетать их обоих всегда выглядит ужасно.

ответил Christopher 24 Jam1000000amMon, 24 Jan 2011 08:23:33 +030011 2011, 08:23:33
1

Стандарт будет «как ширина /высота». Это зависит от экрана пользователя:

http://www.w3schools.com/browsers/browsers_display.asp

ответил PeterMmm 19 Jpm1000000pmWed, 19 Jan 2011 18:09:05 +030011 2011, 18:09:05
1

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

Начиная с января 2013 года.

  1. 1366x768 25.4%

  2. 1920x1080 11.0%

  3. 1280x1024 9.7%

  4. 1440x900 7.3%

  5. 1280x800 8.2%

  6. 1680x1050 5.7%

  7. 1600x900 5.0%

  8. 1920x1200 2.9%

  9. 1360x768 2.1%

  10. 2560x1440 1.1%

  11. Другие 11.6%

ответил Simon Hayter 23 FebruaryEurope/MoscowbSat, 23 Feb 2013 00:29:04 +0400000000amSat, 23 Feb 2013 00:29:04 +040013 2013, 00:29:04
1

В Google Analytics записываются разрешения экрана посетителя. Вы можете легко создать собственный отчет, чтобы проверить, какие общие размеры экрана ваших посетителей. Вот статистика (вверху 15) для моего сайта на май 2013 года:

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

Статистика варьируется от сайта к сайту в зависимости от типа трафика, который он получает, поэтому дизайн соответствует. Я сам предпочитаю дизайн жидкости с процентной шириной, 1000px min-width и разумным max-width.

ответил Salman A 21 J0000006Europe/Moscow 2013, 17:39:30
0

На самом деле нет такой вещи, как стандарт, и статистика полностью зависит от целевой демографии. Стремление к техническим людям, как правило, приводит к лучшему аппаратным средствам и более высоким разрешениям, а тем более к технической обработке. Но тогда есть телефоны, нетбуки и т. Д., Которые в большинстве случаев имеют значительно более низкое разрешение, чем норма.

Для справки я обычно принимаю как минимум 1024x768.

В любом случае, вот некоторые из них: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php

ответил Hawxby 19 Jpm1000000pmWed, 19 Jan 2011 18:09:03 +030011 2011, 18:09:03
0

Я думаю, это зависит от содержания веб-сайта.

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

Итак, я не верю (и не люблю) стандарт о размерах веб-макета.

ответил Eray 19 Jpm1000000pmWed, 19 Jan 2011 20:40:07 +030011 2011, 20:40:07
0

960 пикселей - это самое безопасное, так как оно работает на экране 1024x768 и оставляет место для полосы прокрутки, а также работает на iPhone в ландшафтном режиме (потому что пиксель удваивает экран 480x320 до эффективного 960x640, t иметь полосу прокрутки).

ответил Mike Scott 19 Jpm1000000pmWed, 19 Jan 2011 21:45:54 +030011 2011, 21:45:54
0

Учитывая, что большинство современных широкоэкранных мониторов имеют разрешение «1440x900» или более широкий, я бы подумал, что ширина 1280 пикселей становится более «стандартным», особенно когда речь заходит о показе изображений.

ПРИМЕЧАНИЕ. Ширина 1280 пикселей была шириной многих старых моделей с соотношением сторон 17: 17 и 19 дюймов.

ответил J. Chin 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 23:44:40 +0400000000pmFri, 22 Feb 2013 23:44:40 +040013 2013, 23:44:40
-1

960 пикселей - лучшая ширина для сайтов

ответил baarathnet 25 FebruaryEurope/MoscowbSat, 25 Feb 2012 15:41:22 +0400000000pmSat, 25 Feb 2012 15:41:22 +040012 2012, 15:41:22

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132