Как сделать ширину окна браузера 1000 px

Обновлено: 15.07.2024

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

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

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

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

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

Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера .

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

Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)

104 комментария:

calmos спасибо NMitra Пожалуйста.
Это действительно полезная статья! Анонимный Не могу не согласится - статья действительно полезная.

Только вот как-то привык что ли к стандартной ширине блога, или просто лень заниматься (а чесно говоря надо. :) )

Спасибо за информацию, Наталия, как только руки дойдут, так сразу и возьмемся!!

Вам - букетик ромашек и еще одно спасибо!! NMitra Я тоже так сначала думала, но с увеличением занимаемой площади ресурс выглядит более выигрышно. Плюс с увеличением разрешения экрана можно разместить дополнительные рекламные блоки. Анонимный Уговорил себя и сел пробовать менять ширину блога. Не получилось. Одна из причин - не нашел подходящего для вписывания максимальной ширины 100 % кода, потом что-то похожее нашел, но основная проблема осталась - старый шаблон: увеличивается то одно, то другое, но все нормально свои места занимать не желает, вот и в этот раз новации обходят меня стороной :) и не связываются.. NMitra Со старым шаблоном ещё проще. В разделе @media указаны основные его элементы. Трудность может возникнуть при использовании цельно изображения в качестве фона, такого как в "Словечко". Nattaxa Спасибо, работает. Nattaxa Только разрешения, а не расширения. (в заголовке) NMitra Вот спасибо.)))

Из минусов я вижу трудоёмкость метода.

@ Media я использую, если нет альтернативного варианта с max-width и min-width. Например, меню сверху на данном блоге слишком широкое и на экранах с маленьким разрешением показывается в два слоя, что некрасиво. В IE можно посмотреть. Поэтому для меньших экранов монитора я уменьшаю размер букв, что выглядит следующим образом:

Уменьшите размеры окна браузера Мозилы для демонстрации. Мне нравится, что можно регулировать такие мелочи.

Не думаю, что большая часть читателей будет применять @ Media. Только малая часть из них.

body font: $(body.font);
color: $(body.text.color);
background: $(body.background);
>

body padding-left: 20px;
padding-right: 20px;
>
html body .content-outer max-width: 100%;
> temasey я поставил это после стайла, но не оч радуюсь, так и должно быть? NMitra Не туда добавили. Уберите. В шаблоне найдите строку

После неё будет код, указанный в комментарии 35. Добавляйте часть, которая следует после слова "внесите". "Внесите" не должно быть в коде. temasey ой)
я просто код не проглядел)
эмм..та че то неоч то изменения проглядываются NMitra А теперь установите нужные значения padding (отступ) и max-width (максимальная ширина). ThreeT Народ, подскажите.

body max-width: 1000px;
>
.content-outer, .content-fauxcolumn-outer, .region-inner max-width: 1000px;
>

Это должно сделать шаблон "резиновым". Далее нужно в шаблоне все текстовые элементы перевести в %. Например, заголовок h, тег p и т.п. Для фонового изображения прописать

background-size: 100% 100%;

Могу сказать, что будет не просто. Александр Кувшинников После того, как я изменил значения, "шаблон" прилип к левому краю, стали "обрубленные" полоса меню и футера. Хотелось бы сохранить первоначальное состояние: блок с контентом по центру, полосы меню и футера от края экрана до края. А вот при уменьшении пропорция сохранялась бы. NMitra margin: 0 auto; по центру выравнивает. Я предупреждала, что будет не просто. В вашем случае нужно обладать довольно приличным багажом знаний, чтобы код переделать и чтобы всё корректно отображалось, потому что шаблон не стандартный. Переделывать всегда сложнее, чем писать с чистого листа. Александр Кувшинников Спасибо! Я его и так полностью переделал практически, за исключением тех стилей, которые прописаны в файлах Google. С CSS, думаю, не очень сложно будет.
Вопрос: "резиновый" сайт и адаптивный веб-дизайн - понятия разные или одно и тоже?
Посмотрел исходники некоторых сайтов с RWD, шрифты у них прописаны в px, а вот ширина в процентах. Александр Кувшинников Как оказалось - достаточно сложно. В том плане, что если я прописываю max-width для выше указанных селекторов, длина меню и футера становится тоже равной 1000 px. А хочется, чтобы эти составляющие были на всю ширину монитора (такой дизайн). В остальном все достижимо: @media пропишу, значения шрифтов, заголовков и т.д. сменю. Несколько часов сижу и никак не могу "догнать" как растянуть на всю ширину монитора меню и подвал - от края до края.

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

Текущие значения вашего браузера:

Ширина
document.body.clientWidth;
innerWidth;
outerWidth;
screen.availWidth.
screen.width;

Высота
document.body.clientHeight;
innerHeight;
outerHeight;
screen.availHeight.
screen.height;

document.body.clientWidth — ширина элемента body.
innerWidth — внутренняя рабочая часть браузера с сайтом.
outerWidth — размер с учётом полос прокрутки и рамок браузера.
screen.width — разрешение экрана по горизонтали.
screen.availWidth — доступная область эркана для окон. Не учитвает служебные панели операционной системы, например, панель задач в Windows.

Пример события для отслеживания изменения размеров окна браузера в реальном времени. Результаты выводятся в консоль браузера.

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

2020-11-26 00:54:22 209

Проверка сайта на разных разрешениях через браузеры

Firefox

Chrome

Yandex

Другие браузеры

Онлайн-сервисы для проверки адаптива

BrowserStack

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

Каждое устройство доступно до 1 мин. во время бесплатной пробной версии.

Стоимость подписки для проверки сайтов только в настольных браузерах (для одного пользователя) – 29 долл., в настольных и мобильных – 39 долл.

Screenfly

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

CrossBrowserTesting

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

Live Testing – для ручных тестировщиков и разработчиков, которым нужны удаленные браузеры для взаимодействия, тестирования и отладки (29 долл., 1 юзер).
Automated Testing – для групп разработки и контроля качества Waterfall, которым необходимо запускать ручные и автоматические тесты (78 долл., 1 юзер).
Unlimited Testing – когда требуется неограниченное тестирование на параллельных устройствах и в браузерах (100 долл., 1 юзер).

Ghostlab

Удобно, что можно делать снимки экрана с любого устройства, аннотировать их и перетаскивать на свой баг-трекер.

Пробный период длится 7 дней. Стоимость программы – 49 долл.

Responsinator

Ресурс предлагает протестировать страницу в следующих вариантах ширины: 375, 734, 412, 684, 667, 414, 736, 768, 1024.

Инструменты от поисковых систем для проверки адаптива

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

Google Mobile Friendly

Google Mobile Friendly лучше всего подходит для проверки удобства использования мобильных девайсов и фрагментов кода.

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

Mobile Friendly – Яндекс.Вебмастер

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

Как узнать, какими браузерами пользуются посетители сайта?

Важно! Сайт должен быть подключен к Google Analytics/Яндекс.Метрике.

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

Основы адаптивного дизайна

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

Что такое адаптивный дизайн?

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).

max-width и width

С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.

min-width и width

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

Практика

Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.

Использование media screen

Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.

1024 пикселя

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

Вот, что необходимо прописать в CSS

768px

Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.

Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.

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

Размер окна браузера

Под какое разрешение делать сайт?
Как рассчитать ширину сайта для того, чтоб не появлялся горизонтальный скроллинг?

Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма).
Размер окна браузера — это ширина и высота области просмотра в пикселях. Это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Размер окна браузера пользователь может менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

Пользователь может просматривать сайты на различных устройствах. Ниже приведена статистика устройств просмотра сайтов Яндекс.Метрика на январь 2021 год.

Типы устройств просмотра сайтов

Размеры окон экрана монитора и браузера указаны в пикселях (px).

Распространенные мониторы

Различные размеры окон браузера

1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора (дисплея) или мобильного дисплея.

1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Размер экрана

Доступный размер экрана

Внешнее окно браузера

Окно прсмотра

2.1. Размер внешнего окна — это ширина и высота текущего (активного) окна браузера, включая адресную строку, поисковую строку, панель вкладок, открытые боковые панели и прочие панели браузера.

2.2. Размер внутреннего окна — это ширина и высота области просмотра .

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

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

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

Изменяем масштаб страницы в Яндекс.Браузере

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

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

С помощью комбинации клавиш

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

Открываем любую страницу.
Зажимаем клавишу Ctrl (или клавишу Cmd в macOS).
И нажимаем на клавишу + (плюс) , чтобы постепенно увеличивать размер страницы.
Чтобы уменьшить масштаб, делает то же самое, только вместо клавиши + (плюс) нажимаем на клавишу — (минус) .

С помощью колесика мыши

Вместо клавиш + и — можно использовать колесико мыши. Это работает так:

Плагин для отображения размеров окна браузера

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

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

Опубликовал репозиторий на GitHub

Если не знакомы с GitHub, можно почитать отдельную статью — Установка GitHub Desktop и его базовое использование

Зачем писать этот плагин?

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

Во-первых, это хорошая практика по JavaScript — писать простые, но полезные для себя инструменты

Во-вторых, в некоторых браузерах, особенно в мобильных, нет возможности устанавливать расширения

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

Этот плагин будет помогать при разработке и тестировании адаптивной верстки

При адаптивной верстке необходимо постоянно следить за размерами окна браузера в зависимости от контрольных точек @media запросов

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

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

@media запросы основаны на полной ширине окна браузера, включая полосы прокрутки.

@media запрос @media (max-width: 1199.98px) взят из Bootstrap. В примере выше, если ширина меньше 1200px, то .container меняет цвет фона на синий

@media запрос срабатывает на полную ширину окна, и пока нет полос прокрутки ширина окна и ширина контента совпадают

Но такое на практике встречается редко. Обычно контентная часть намного больше. Для примера просто назначим высоту .content больше, чем высота окна браузера

Теперь появилась полоса прокрутки. @media запрос сработает как и раньше при полной ширине окна браузера, включая ширину полосы прокрутки, но теперь полоса прокрутки отнимает место у контентной части. При полной ширине окна 1200px, контенту остается около 1183px.

Предположим, в шапке макета много элементов, которые мы хотим при адаптивной верстке плотно уместить в 1200px. Ставим @media (max-width: 1199.98px) , настраиваем ширину браузера на 1200px, но элементы не умещаются из-за того, что полоса прокрутки отняла часть ширины, что на первый взгляд не совсем очевидно

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

Что такое адаптивный дизайн?

Теория (основы)

max-width и width

width: 100%; max-width: 1000px;

min-width и width

Практика

Проверить адаптивность шаблона можно с помощью масштабирования окна (см. скриншот).

Читайте также:

Как сделать ширину окна браузера 1000 px

Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)

104 комментария:

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

Проверка сайта на разных разрешениях через браузеры

Firefox

Chrome

Yandex

Другие браузеры

Онлайн-сервисы для проверки адаптива

BrowserStack

Screenfly

CrossBrowserTesting

Ghostlab

Responsinator

Инструменты от поисковых систем для проверки адаптива

Google Mobile Friendly

Mobile Friendly – Яндекс.Вебмастер

Как узнать, какими браузерами пользуются посетители сайта?

Основы адаптивного дизайна

Что такое адаптивный дизайн?

Теория (основы)

max-width и width

min-width и width

Практика

Использование media screen

1024 пикселя

768px

Размер окна браузера

Типы устройств просмотра сайтов

Распространенные мониторы

Различные размеры окон браузера

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

Изменяем масштаб страницы в Яндекс.Браузере

С помощью комбинации клавиш

С помощью колесика мыши

Плагин для отображения размеров окна браузера

Зачем писать этот плагин?

Что такое адаптивный дизайн?

Теория (основы)

max-width и width

min-width и width

Практика