Как настроить ширину окна браузера в пикселях

Safari

Настройка окна просмотра

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

Макет и метрики на iPhone и IPod Touch

Пооскольку Safari на iOS lобавляет элементы управления выше и ниже веб-контента, у вас нет доступа ко всей площади экрана. В портретной ориентации, видимая область для веб-контента на iPhone и IPod Touch составляет 320 х 356 пикселей, как показано на рисунке ниже. В альбомной ориентации, видимая область составляет 480 × 208 пикселей.

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

Что такое окна просмотра?

Окно просмотра на десктопе и окно просмотра на iOS немного отличаются.

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

Настройки окна просмотра по умолчанию

Safari на iOS устанавливает размер и масштаб области просмотра так, чтобы разумные значения по умолчанию, подходили для большинства веб-страниц. Ширина по умолчанию составляет 980 пикселей. Тем не менее, эти значения по умолчанию не могут хорошо работать для всех веб-страниц, особенно если вы адаптировали Ваш сайт для конкретного устройства.

Использование мета тега viewport

Использование мета тега viewport способно улучшить представление вашего веб-контента на iOS. Обычно вы используете мета тег viewport для установки ширины и начального масштаба просмотра. Например, если ваша веб-страница уже, чем 980 пикселей, то Вы должны установить ширину окна просмотра, чтобы соответствовать вашему веб-контенту. При разработке iPhone или iPod touch специфичного веб-приложения, установите ширину по ширине устройства.

Поскольку iOS работает на устройствах с различным разрешением экрана, вы должны использовать константы вместо числовых значений при ссылке на размеры устройства. Используйте device-width для ширины устройства и device-height для высоты в портретной ориентации.

Вам не нужно устанавливать все свойства окна просмотра. Если установлено только одно из свойств, то Safari на iOS подставляет другие свойства. Например, если вы установите масштаб в 1.0 , Safari предполагает device-width ширину в портретной и device-height в горизонтальной ориентации. Поэтому, если вы хотите иметь ширину 980 пикселей и иметь начальный масштаб равный 1,0, то установите оба этих свойства.

Например, чтобы установить ширину окна просмотра по ширине устройства, добавьте это в ваш HTML файл:

Чтобы установить начальный масштаб в 1,0 , добавьте это в ваш HTML файл:

Для установки начального масштаба и отключения пользовательского масштабирования, добавьте это в ваш HTML файл:

Изменение ширины и высоты окна просмотра

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

Если ваша веб-страница уже, чем ширина по умолчанию, например 640 пикселей, установите ширину окна просмотра по ширине веб-страницы. Чтобы сделать это, добавьте следующие строки в ваш файл HTML внутри блока:

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

Как Safari выводит ширину, высоту и начальный масштаб

Если вы установили только некоторые из свойств, то Safari на iOS выводит значения других свойств с целью установки веб-страницы в видимой области. Например, если установлен только начальный масштаб, то ширина и высота случайны. Аналогично, если установлена​​ только ширина, то высота и исходный масштаб случайны, и так далее. Если предполагаемые значения не работаю на веб-странице, то установите большее количество свойств окна просмотра.

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

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

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

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

Следующий пример задает ширину окна просмотра 1280px — :

Zero Block: отзывчивый дизайн

Grid Container — основная рабочая область . В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если мы располагаем элементы внутри Grid Container, то независимо от размера экрана они будут находится внутри сетки из 12 колонок.

По оси X Grid Container всегда позиционируется по центру.

То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.

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

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

Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.

У каждого элемента в рабочей области есть координаты — положение относительно начало координат по оси X и по оси Y.

Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.

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

Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container , а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.

17 полезных Chrome-расширений для дизайнеров и веб-разработчиков

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

Muzli

Все самое интересное для дизайнеров: новости, статьи, полезные ссылки.

Responsive Web Design Tester

Это быстрый и простой способ протестировать ваш веб-сайт на отзывчивость. Помимо Chrome, поддерживается также Opera и Mozilla Firefox.

Window Resizer

Этот инструмент позволяет менять размер окна браузера, чтобы тестировать макеты в разном разрешении.

Page Ruler

Линейка, которая позволит измерить пиксельные размеры и позицию любого элемента на любой веб-странице.

Dimensions

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

ColorZilla

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

WhatFont

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

TypeWonder

Позволяет тестировать веб-шрифты на любом веб-сайте в реальном времени.

CSS — Shack

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

Поддерживает все популярные браузеры. Инструмент платный, но бесплатный пробный период никто не отменял.

PerfectPixel by WellDoneCode

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

Lightshot

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

UX Check

Запускает эвристическую оценку вашего сайта (юзабилити).

Code Cola

Позволяет редактировать наглядно CSS-стили онлайн-страниц.

Corporate Ipsum

Генерирует рандомные корпоративные тексты для тестового наполнения сайта.

Pendule

Набор инструментов веб-девелопера для Chrome.

Fontface Ninja

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

Prospero For Gmail

Инструмент позволяет в один клик добавить шаблон фриланс-предложения в ваше письмо на Gmail. Останется лишь заполнить пробелы.

Перемещение окна и прокрутка страницы в JavaScript

1. Перемещение окна
2. Изменение размеров окна
3. Прокрутка документа
4. Комментарии

В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).

Перемещение окна

В JavaScript имеются следующие методы объекта window для перемещения окна:

• moveTo – абсолютное перемещение окна в указанные координаты экрана;
• moveBy – перемещения окна на указанное количество пикселей относительно его текущего положения.

Синтаксис метода « window.moveTo »:

Пример, в котором переместим окно в точку (50, 75):

Пример, в котором произведём перемещение окна в левый верхний угол экрана:

Синтаксис метода « window.moveBy »:

Например, сдвинем окно на 75px вправо и на 100px вниз:

В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:

• окно (или вкладка) должно быть создано с помощью window.open ;
• в окне не должно находиться более чем одной вкладки.

Изменение размеров окна

Методы объекта window для изменения размеров окна:

• resizeTo – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные значения;
• resizeBy – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные величины относительно его текущих размеров.

В JavaScript методы resizeTo и resizeBy выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).

Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

Например, уменьшим размеры окна (его ширину и высоту) на 50px:

Прокрутка документа

В JavaScript имеются следующие методы объекта window для прокрутки документа:

• scroll ( scrollTo ) — прокручивает страницу до указанного места в абсолютном выражении;
• scrollBy — прокручивает документ на определённое количество пикселей относительно текущей позиции.

Синтаксис метода scroll (метод scrollTo выполняет то же самое, что scroll и не отличается по синтаксису):

Синтаксис метода scrollBy :

Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод scroll или scrollBy с определёнными значениями: