Ширина экрана в пикселях для сайта

Ширина экрана в пикселях для сайта

Быстрая навигация по этой странице:

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

О важности вопроса

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

Дело в том, что если если выбранная вами ширина будет больше, чем разрешение экрана у посетителя, то сайт в полном объеме не поместится в браузере, появится горизонтальная полоса прокрутки. В результате этого пользователь не увидит часть информации или ему будет некомфортно работать с вашим проектом. Итог будет один — уменьшение поведенческих факторов.

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

Итак, какой же должна быть ширина сайта в пикселях?

Рассчитываем оптимальный вариант

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

Для моего проекта на момент написания статьи сервис Liveinternet выдавал такую статистику (показаны строки, имеющие долю в статистике более 5 процентов):

  • 1366×768 — 23.7%
  • 1280×1024 — 15.1%
  • 1024×768 — 14.7%
  • 1280×800 — 9.5%
  • 1920×1080 — 8.4%
  • 640×480 — 6.2%
  • 1600×1200 — 5.9%

Как видно из статистики, подавляющее большинство пользователей использует мониторы с разрешением шириной от 1280 пикселей и выше. Тем не менее, обратите внимание на строку, выделенную жирным шрифтом: 14,7 % имеет разрешение 1024 пикселей. Это в среднем каждый шестой/седьмой пользователь — достаточно большой процент, который имеет смысл учитывать.

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

Однако 1024 пикселя — это разрешение монитора, а фактически площадь страницы в браузере меньше, так как часть экрана съедает полоса прокрутки (скролл) — это около 24 пикселей.

Следовательно, наша страничка должна открываться не более, чем на 1000 пикселей. Часто дизайнеры или заказчики берут еще 20 пикселей в запас и делают сайт на 980 px.

Таким образом, наиболее оптимальной шириной является 980-1000 px.

Почему часто используется 960?

Если Вы обратите внимание на шаблоны для WordPress (как, впрочем, и для многих других CMS), то вы заметите, что многие из них ориентированы на 960 пикселей.

Зачем же отклоняться от оптимального варианта в меньшую сторону? Здесь следует отметить, что 960 — это математически очень «удобное число», так как, в отличие от 980, оно делится на каждое из этих чисел: 6, 8, 12, 16, 24 (и, соответственно, на множество других).

Это удобно для создания дизайна по так называемой «сетке» (grid system) — когда при создании макета он мысленно делится на 6/8/12 и т.д. частей и все блоки макета выстраиваются по этим линиям — получается симметрично и красиво (подробнее про это написано на 960.gs и других ресурсах).

Если же вы делаете или заказываете дизайн с нуля и просто хотите, чтобы, например, контентная часть занимала 600 пикселей, а справа был сайдбар — тогда вам необязательно ориентироваться на grid system и 960 пикселей.

Читайте также:  Смартфон lg k10 lte white k430ds

Осторожность с резиновым макетом

В каком-то смысле решением рассматриваемой проблемы является резиновый макет — ширина страницы растягивается под ширину экрана, потому заранее учтены все варианты дисплеев.

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

Представьте, что вы читайте книгу, в которой одна строка имеет длину, предположим, в семьдесят сантиметров или в один метр. Удобно ли вам будет ее читать? Полагаю, что нет, ведь не зря сам по себе книжный формат в среднем не предполагает более 60-80 символов на одной строке. Потому я такую технологию создания сайта не рекомендовал бы.

Потому, если вы делаете или заказываете резиновый макет, позаботьтесь о посетителе — поставьте ограничение около 1200-1300 px как максимальную ширину вашей страницы.

Обучающие статьи и советы, как правильно сделать сайт и настроить сервер

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

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

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

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

Рассчитываем оптимальный вариант

Необходимо рассчитать оптимальную версию. Для однозначного ответа на данный вопрос нужно исследовать имеющуюся в настоящее время статистику. В момент написания данной статьи присутствовала следующая статистика:

  • 1366×768 — 23.7%
  • 1280×1024 — 15.1%
  • 1024×768 — 14.7%
  • 1280×800 — 9.5%
  • 1920×1080 — 8.4%
  • 640×480 — 6.2%

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

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

Но 1024 px — это разрешение самого монитора, хотя параметры страницы гораздо меньше в браузере, потому как, частью дисплея поглощает полоса прокрутки. Из этого следует, что страничка обязана быть не больше 1000 пикселей. Довольно часто клиенты или дизайнеры берут запасные 20 пикселей и создают сайт на 980 пикселей.

Читайте также:  Произошла ошибка во время загрузки multiplayer adaptation

Итак, самая оптимальная ширина – это 980-1000 px.

Почему часто используется 960?

По какой причине часто используется 960? Если вы присмотритесь к шаблонам для WordPress, то сразу же увидите, что множество из них заточено на 960 пикселей. Не стоит отказываться от лучшего варианта. Надо заметить, что 960 является математически «удобным числом», потому как делится на такие числа, как шесть, восемь, двенадцать и т.д.

Это весьма удобно для того, чтоб создавать дизайн «сетке» — то есть, в ходе создания макета он делится на шесть, восемь и двенадцать частей, а блоки макета располагаются по данным линиям. В итоге выходит симметрично и привлекательно.

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

Осторожность с резиновым макетом

Резиновый макет в определенном смысле разрешает упомянутую выше проблему. Это когда ширина страницы способна растянуться под ширину экрана и потому учтены предварительно все версии дисплеев.

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

Представьте себе, что вы занимаетесь чтением книги со строкой около семьдесят сантиметров длины. Удобно вам будет читать ее? Скорее всего нет, ведь средний формат книги предполагает не больше 60-80 символов на строке. Именно поэтому, подобная технология создания сайта не приемлема.

Если вы создаете резиновый макет, то вам стоит позаботиться о посетителе — поставить ограничение, примерно 1200-1300 пикселей максимальной ширины страницы.

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

Размер экрана, разрешение и область просмотра: что это значит?

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 1024 × 768).

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

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

Нужна помощь в определении того, удобен ли ваш сайт для просмотра на разных мобильных устройствах? Воспользуйтесь нашим сервисом →.

Читайте также:  Как удалить контакт из телеграмма на телефоне

Отзывчивый дизайн

Невозможно разработать стиль и дизайн сайта для каждого устройства. Поэтому для адаптивной вёрстки разработчики часто:

  • Группируют стили по типичным размерам экранов для телефонов, планшетов и настольных версий компьютеров. В этом случае на экранах, размеры которых превышают 7 дюймов по диагонали, сайт отображается с разрешением стационарного компьютера.
  • Используют контрольные точки. Они определяют ширину дисплея в пикселях. Это значение устройства корректируют в зависимости от размеров экранов.

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

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

/* Стили для десктопа — начало */

@media screen and (max-width: 991px) <
/* стили для больших планшетов — начало */

@media screen and (max-width: 767px) <
/* стили для средних планшетов — начало */

@media screen and (max-width: 479px) <
/* стили для телефонов — начало */

Самые популярные разрешения экрана

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

Устройства Apple

Разрешение дисплея Viewport
iPhone
iPhone XR 828 x 1792 414 x 896
iPhone XS 1125 x 2436 375 x 812
iPhone XS Max 1242 x 2688 414 x 896
iPhone X 1125 x 2436 375 x 812
iPhone 8 Plus 1080 x 1920 414 x 736
iPhone 8 750 x 1334 375 x 667
iPhone 7 Plus 1080 x 1920 414 x 736
iPhone 7 750 x 1334 375 x 667
iPhone 6 Plus/6S Plus 1080 x 1920 414 x 736
iPhone 6/6S 750 x 1334 375 x 667
iPhone 5 640 x 1136 320 x 568
iPod
iPod Touch 640 x 1136 320 x 568
iPad
iPad Pro 2048 x 2732 1024 x 1366
iPad 3 и 4-го поколения 1536 x 2048 768 x 1024
iPad Air 1 и 2 1536 x 2048 768 x 1024
iPad Mini 2 и 3 1536 x 2048 768 x 1024
iPad Mini 768 x 1024 768 x 1024

Устройства Android

Разрешение дисплея Viewport
Телефон
Nexus 6P 1440 x 2560 412 x 732
Nexus 5X 1080 x 1920 412 x 732
Google Pixel 3 XL 1440 x 2960 412 x 847
Google Pixel 3 1080 x 2160 412 x 824
Google Pixel 2 XL 1440 x 2560 412 x 732
Google Pixel XL 1440 x 2560 412 x 732
Google Pixel 1080 x 1920 412 x 732
Samsung Galaxy Note 9 1440 x 2960 360 x 740
Samsung Galaxy Note 5 1440 x 2560 480 x 853
LG G5 1440 x 2560 480 x 853
One Plus 3 1080 x 1920 480 x 853
Samsung Galaxy S9+ 1440 x 2960 360 x 740
Samsung Galaxy S9 1440 x 2960 360 x 740
Samsung Galaxy S8+ 1440 x 2960 360 x 740
Samsung Galaxy S8 1440 x 2960 360 x 740
Samsung Galaxy S7 Edge 1440 x 2560 360 x 640
Samsung Galaxy S7 1440 x 2560 360 x 640
Планшеты
Nexus 9 1536 x 2048 768 x 1024
Nexus 7 (2013) 1200 x 1920 600 x 960
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 2560 x 1700 1280 x 850

Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже

Ссылка на основную публикацию
Шарик равноускоренно скатывается по наклонной плоскости
За каждую секунду, путь пройденный шариком,увеличивается на 20см. Следовательно за 4 секунду он пройдет 70см. Ответ:(2) Если ответ по предмету...
Что такое ogg формат
Ogg — Dateiendung: .ogg, .oga, .ogv, .ogx MIME Type … Deutsch Wikipedia .ogg — Dateiendung .ogg, .oga, .ogv, .ogx MIME...
Что такое pppoe соединение на роутере
PPPoE (англ. Point-to-point protocol over Ethernet ) — сетевой протокол канального уровня (второй уровень сетевой модели OSI) передачи кадров PPP...
Шарнирная стойка для дрели
Стойка для дрели с тисками FIT 37861 Стойка для дрели Калибр 96203 Стойка для дрели RedVerg DS-43 Стойка для дрели...
Adblock detector