Разрешение веб-страницы

Разрешение экрана и макет страницы

Один из наиболее часто задаваемых вопросов по web-юзабилити — «Под какое разрешение следует разрабатывать дизайн?». Развёрнутый ответ относительно сложен, однако основная его суть проста.

  • Оптимизируйте макет под разрешение 1024×768, которое в настоящее время используется наиболее широко. Разумеется, следует проводить оптимизацию под разрешение, наиболее распространённое среди целевой аудитории сайта, поэтому упомянутый размер в будущем изменится. Это может иметь место и сейчас, если, скажем, вы разрабатываете дизайн для интранет-сайта компании, которая обеспечивает всех своих сотрудников большими мониторами.
  • Не разрабатывайте сайт в расчёте строго на одно разрешение, поскольку размеры экрана у всех пользователей разные. Это тем более актуально, если учесть, что пользователи не всегда разворачивают окно браузера на весь экран (особенно если у них большие экраны).
  • Используйте резиновые макеты, которые автоматически подстраиваются под текущий размер окна браузера (иначе говоря, избегайте жёстких макетов, имеющих одну и ту же ширину вне зависимости от размера окна).
  • В настоящее время примерно на 60% всех мониторов используется разрешение 1024×768. Для сравнения, лишь около 17% используют 800×600, откуда очевидно, что наилучшее отображение сайта на таких дисплеях — не самая важная задача. Не менее очевидно, однако, что эти 17% нельзя просто игнорировать, создавая жёсткий макет, для отображения которого в полную ширину не хватит экранного пространства пользователя.

    Оптимизация под 1024×768

    Когда я говорию «оптимизация», я подразумеваю, что страница должна выглядеть и работать наилучшим образом в окне наиболее распространённого размера. При этом она выглядит хорошо и работает достаточно хорошо при иных размерах окна — именно поэтому я и рекомендую резиновую вёрстку. Однако лучше всего страница должна смотреться и работать на 1024×768.

    Три основных критерия при оптимизации макета страницы для определённого разрешения таковы:

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

    Все три критерия следует иметь в виду для каждого из целевых размеров экрана, на которые вы ориентируетесь, постоянно проверяя поведение макета при изменении размеров окна браузера в диапазоне от 800×600 до 1280×1024.

    Желательно, чтобы ваша страница работала и на размерах, не принадлежащих к этому диапазону, хотя подобные крайности не столь важны. Менее полупроцента пользователей всё ещё используют разрешение 640×480. Хотя такие пользователи, безусловно, должны иметь доступ к вашему сайту, предоставление им более-менее приемлемого дизайна является допустимым компромиссом.

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

    Как прокрутка, так и первоначальная видимость зависят от размера экрана: большие экраны позволяют отобразить больше контента над линией сгиба без прокрутки. Именно в этом разрезе вам следует проводить оптимизацию под 1024×768: представить наиболее интересный материал над линией сгиба при этом разрешении (убедившись при этом, что особенно важная информация видна и на 800×600).

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

    Большие экраны

    Многие пользователи обладают большими дисплеями. В настоящее время порядка 18% пользователей используют как минимум 1280×1024. Количество пользователей с большими экранами растёт, хотя не столь быстро, как мне бы того хотелось.

    Большие мониторы являются наиболее простым способом увеличить производительность офисных работников, и каждый, чей доход составляет по меньшей мере 50 тыс. долларов в год, должен иметь разрешение экрана 1600×1200. Плоскопанельные дисплеи с этим разрешением стоят сейчас менее 500 $. Так, если экран большего размера увеличит производительность хотя бы на 0,5%, вы восполните затраты на монитор менее чем за год. (Типичные корпоративные накладные расходы в два раза превышают затраты компании на сотрудников; всегда учитывайте вложенные в сотрудника средства, а не его заработную плату, при любом расчёте производительности).

    Как Apple, так и Microsoft опубликовали отчёты, где пытались измерить увеличение производительности от использования мониторов большего размера. К сожалению, из-за различных методологических недостатков не было приведено конкретных цифр. Мой опыт показывает, что предполагаемый прирост производительности составляет 5-10%, когда пользователи выполняют работу, тесно связанную с компьютером, на большом мониторе. Это означает суммарный прирост производительности порядка 0,5-1% на сотрудника, в общем объёме работы которого труд, ориентированный на использование монитора, занимает 10% рабочего дня. Без сомнения, большие экраны оправдывают затраты на них.

    Лично я использую дисплей 2048×1536, и я бы даже не сказал, что это действительно большой экран. Я ожидаю, что в течение ближайших 10 лет достаточное распространение получат мониторы с разрешением, скажем, 5000×3000 — по меньшей мере, среди профессионалов высшего уровня.

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

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

    В любом случае, потребность в новой парадигме в будущем не изменит текущую рекомендацию: оптизизируйте под 1024×768, но не разрабатывайте дизайн в расчёте исключительно на этот размер. Ваши страницы должны работать на любом разрешении от 800×600 до 1280×1024 и выше.

    tanalin.com

    Стандартная ширина сайта — какой она должна быть?

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

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

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

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

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

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

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

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

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

    Для моего проекта на момент написания статьи сервис 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 пикселей.

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

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

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

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

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

      www.runcms.org

      Форум сайта фотошоп-мастер: Разрешение 72 или 300? — Форум сайта фотошоп-мастер

      • Форум сайта фотошоп-мастер
      • >Вопросы по работе в фотошопе
      • >Web-дизайн в фотошопе
      • Разрешение 72 или 300?

        #1 milicevic

      • Сообщений: 3
      • Регистрация: 29 Ноябрь 12
      • Собрано лайков: 0
      • #2 Борис

      • инетересно все интересное
      • Сообщений: 8 122
      • Регистрация: —
      • Репутация: 7779
      • Собрано лайков: 1281
      • Награды:

        Не нужно особо голову-то ломать. Достаточное разрешение для интернета 72, разрешение для печати варьируется в зависимости от требований печатной организации и создаваемого объекта (например, для больших баннеров высокое разрешение не требуется). На мониторе разницы у двух изображений с одинаковыми линейными размерами по ширине и высоте ([b]в пикселях[/b]), но при разном разрешении, вы не увидите.
        Лично: практически все работы делаю под печать, поэтому для исходного изображения задаю необходимые размеры и разрешение [b]300[/b]. Для дальнейшей демонстрации в интернете просто уменьшаю работу через «Сохранить для веб» либо через «Размер изображения», о разрешении не заморачиваюсь в этом случае: главное, чтобы размер вебовского документа соответствовал [b]требованиям загрузки по объему и линейному размеру[/b].

        Что значит «графика»? Это широкое понятие. Для растровой графики (фото и рисунки кистью) — растровый редактор, для векторной — векторный.

        #3 JAIRA

      • ^-^
      • Группа: Пользователи
      • Сообщений: 7 468
      • Регистрация: 20 Ноябрь 09
      • Репутация: 4076
      • Собрано лайков: 450
      • Что значит «графика»? Это широкое понятие. Для растровой графики (фото и рисунки кистью) — растровый редактор, для векторной — векторный.

        Сообщение отредактировал JAIRA: 09 Декабрь 2012 — 12:27

        [quote name=’JAIRA’ timestamp=’1355044994′ post=’708453′]
        Не нужно особо голову-то ломать. Достаточное разрешение для интернета 72, разрешение для печати варьируется в зависимости от требований печатной организации и создаваемого объекта (например, для больших баннеров высокое разрешение не требуется). На мониторе разницы у двух изображений с одинаковыми линейными размерами по ширине и высоте ([b]в пикселях[/b]), но при разном разрешении, вы не увидите.
        Лично: практически все работы делаю под печать, поэтому для исходного изображения задаю необходимые размеры и разрешение [b]300[/b]. Для дальнейшей демонстрации в интернете просто уменьшаю работу через «Сохранить для веб» либо через «Размер изображения», о разрешении не заморачиваюсь в этом случае: главное, чтобы размер вебовского документа соответствовал [b]требованиям загрузки по объему и линейному размеру[/b].

        Что значит «графика»? Это широкое понятие. Для растровой графики (фото и рисунки кистью) — растровый редактор, для векторной — векторный.
        [/quote]
        Спасибо. Я вот только не могу понять, допустим баннер 960 х 500 одинакого будет выглядеть на разных мониотрах? Всмысле при растягивании под большее разрешение монитора не будет ухудшаться в качестве?

        #4 milicevic

        • Новичок
        • Репутация: 0
        • JAIRA (09 Декабрь 2012 — 12:23) писал:

          Не нужно особо голову-то ломать. Достаточное разрешение для интернета 72, разрешение для печати варьируется в зависимости от требований печатной организации и создаваемого объекта (например, для больших баннеров высокое разрешение не требуется). На мониторе разницы у двух изображений с одинаковыми линейными размерами по ширине и высоте (в пикселях), но при разном разрешении, вы не увидите.
          Лично: практически все работы делаю под печать, поэтому для исходного изображения задаю необходимые размеры и разрешение 300. Для дальнейшей демонстрации в интернете просто уменьшаю работу через «Сохранить для веб» либо через «Размер изображения», о разрешении не заморачиваюсь в этом случае: главное, чтобы размер вебовского документа соответствовал требованиям загрузки по объему и линейному размеру.

          Что значит «графика»? Это широкое понятие. Для растровой графики (фото и рисунки кистью) — растровый редактор, для векторной — векторный.

          photoshop-master.ru

          Как выбрать правильную ширину сайта, или «Телевизор» вместо монитора

          Гигантомания экранов коснулась не только телефонов, но и настольных компьютеров. Экраном в 25 и даже 29 дюймов никого не удивишь.

          Каталог крупного интернет-магазина

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

          Поэтому, разрабатывая структуру, мы хотим, чтобы:

          — пространство использовалось с умом;

          — при просмотре сайта на больших экранах не было огромного пустого пространства по бокам;

          — сайт не терял удобство использования на небольшом экране.

          Какие есть варианты создания страницы под разные мониторы и разрешения (типы верстки)

          Фиксированная верстка

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

          Резиновая верстка без ограничений

          Упрощенно это выглядит так:

          Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.

          Плюсы такой верстки:

        • Пространство используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.
        • На большом экране сайт очень сильно расползается. Особенно это неудобно для текста.
        • Периодически может возникать пустое пространство между блоками.
        • Личный юзеркейс: у меня плохое зрение, если не надеть очки, приходится сидеть, уткнувшись лицом в монитор. Поверьте – даже на 21 дюйме с разрешением по ширине 1600 пикселей жутко неудобно воспринимать сайт с малого расстояния. Приходится вертеть головой слева направо, чтобы прочесть строчку текста.

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

          Резиновая верстка с заданной минимальной и максимальной шириной

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

          минимум – достигнув этого предела, блоки не «сжимаются», а появляется полоса прокрутки;

          максимум – контент не увеличивается по ширине, а добавляется пустое пространство по бокам, контент сайта при этом размещается по центру.

        • Мы уверены в том, как выглядит контент нашего сайта при определенном разрешении Естественно, мы стараемся сделать максимально красивый сайт для наиболее распространенных разрешений в нашей тематике.
        • Минусы:

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

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

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

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

          Плюсы:

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

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

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

        Как разобраться в этом многообразии разрешений и способов верстки?

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

        Общую статистику популярных разрешений можно найти в сервисах:

        — https://www.w3counter.com/stats/displays/1/resolutions/20/0 – тут статистика в первую очередь по США;
        — https://www.liveinternet.ru/stat/ru/resolutions.html – это общая статистика. Также можно сегментировать статистику по категориям.

        Примечание!

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

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

        Например, если мы возьмем за основу информацию с сайта w3counter, самое популярное разрешение по ширине – это 1366px. Соответственно, эту ширину можно брать как максимум, больше которого увеличивать контент не стоит.

        При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.

        Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:

        Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.

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

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

        Если у вас Яндекс.Метрика:

        1. Заходите в раздел Отчеты -> Стандартные отчеты -> Технологии -> Разрешение дисплея:

        2. Получаем наглядную уникальную статистику, применимую конкретно к вашему сайту (разумеется, зачастую она будет совпадать со стандартной статистикой):


        Если у вас Google Analytics:

        1. Технологии -> Браузер и ОС -> Разрешение экрана:

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

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

        Как проверить отображение сайта на разных разрешениях?

        Чтобы проверить, как выглядит ваш сайт на устройствах с разными разрешениями, можно использовать:

        Тут все довольно просто:

        — выбираете устройство (начиная от телефона и заканчивая телевизором);
        — выбираете разрешение (есть стандартные варианты, также можно указать размер в пикселях самостоятельно);
        — указываете нужные настройки – сайт отображается у вас на экране при заданных параметрах.

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

        Подведем итог

        Перед созданием нового сайта или редизайном необходимо:

        — понять, какие разрешения наиболее популярны у вашей целевой аудитории;

        — определить максимальные и минимальные размеры сайта (в пикселях);

        — выбрать тип верстки;

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

        Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.

        Понравилась статья? Поделитесь ссылкой со своими друзьями:

        Подписывайтесь на наши группы в сообществах, чтобы быть в курсе всех SEO-событий:

        siteclinic.ru

        Разрешения экрана, размеры окна браузера. Справочник (изменения от 27.11.2013)

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

        Для этого мы составили очень простую и удобную таблицу:

        Зеленым цветом выделены строки, показывающие оптимальное разрешение, под которые следует проектировать веб-сайт, так как по данным некоторой статистики у большей части пользователей мониторы поддерживают указанные параметры. Менее 10% имеют разрешение меньше указанного. Желательно, чтобы максимальная ширина сайта не превышала 1259 px, иначе некоторые пользователи вашего сайта могут увидить горизонтальный скроллинг, который является очень неудобным для использования. А если вы на своем сайте не хотите видеть и вертикального скроллинга, или просто хотите узнать высоту той части сайта, которую гарантированно увидят сразу при открытии страницы, то она будет в диапазоне 599-631 px.

        А как быть с владельцами сотовых телефонов, смартфонов и планшетов? Под какое разрешение разрабатывать сайт для них?

        Современные мобильные устройства, кроме очень бюджетных моделей, имеют минимальное разрешение 480×320 px, а чаще 800×480 или более, умеют масштабировать сайты, а также самостоятельно разделять их на блоки, выделять важные текстовые фрагменты. Большинство сайтов корректно отображается на мобильных устройствах и без создания специальной мобильной версии сайта. Если вы все же хотите разработать мобильную версию, то желательно, чтобы она была сверстана в одну колонку (обычные сайты чаще верстают в 2-3 колонки) и не содержала сложных скриптовых и навигационных решений (например, выпадающих меню, мелких управляющих элементов и т.п.).

        Определяем разрешение экрана через JavaScript

        Определяем размер клиентской части окна браузера через JavaScript

        codething.ru

    Смотрите так же:

    • Как рассчитывается пенсия льготная Правила расчета льготной пенсии Досрочная пенсия является особым видом финансового довольствия, предоставляемого работникам при наличии стажа по определенной профессии, даже если возраст еще не приблизился к пенсионному […]
    • Делопроизводство мчс приказ Приказ МЧС России от 3 декабря 2014 г. N 670 "О совершенствовании делопроизводства в территориальных органах, учреждениях и организациях МЧС России" Приказ МЧС России от 3 декабря 2014 г. N 670"О совершенствовании делопроизводства в […]
    • Приказ по экспертной комиссии в доу Приказ об утверждении номенклатуры дел - образец (2018) Отправить на почту Приказ об утверждении номенклатуры дел - образец его может понадобиться, когда необходимо официально закрепить структуру документооборота фирмы. Рассмотрим, для […]
    • Пенсионный налог для частных предпринимателей 2018 Какой размер имеют взносы ИП в Пенсионный фонд в 2018 году Многие предприниматели помнят 2013 год, когда изменения в законодательстве привели к тому, что налоги для ИП в Пенсионный фонд вместо 17 тысяч за год достигали 35; в результате […]
    • Решение суда о начислении пенсии Решение суда о начислении пенсии Автострахование Жилищные споры Земельные споры Административное право Участие в долевом строительстве Семейные споры Гражданское право, ГК РФ Защита прав потребителей Трудовые […]
    • Пенсия надбавки военным Какие существуют надбавки к военной пенсии и случаи ее повышения? Военная пенсия может быть повышена за счет увеличения ее размера, применения надбавок и районных коэффициентов, а также разных доплат (в том числе единовременных). В данном […]