Html landscape orientation css

orientation

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

Note: This feature does not correspond to device orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

Syntax

The orientation feature is specified as a keyword value chosen from the list below.

Keyword values

The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

The viewport is in a landscape orientation, i.e., the width is greater than the height.

Examples

Portrait orientation

In this example we have three boxes in the HTML, and use the orientation media feature to switch between a row layout (in landscape) and a column layout (in portrait).

HTML

div>Box 1div> div>Box 2div> div>Box 3div> 

CSS

body  display: flex; > div  background: yellow; width: 200px; height: 200px; margin: 0.5rem; padding: 0.5rem; > @media (orientation: landscape)  body  flex-direction: row; > > @media (orientation: portrait)  body  flex-direction: column; > > 

Result

Landscape orientation

This example has exactly the same code as the previous example: it has three boxes in the HTML, and uses the orientation media feature to switch between a row layout (in landscape) and a column layout (in portrait).

However, in this example, the example output is embedded in an whose height is less than its width, so the boxes get a row layout.

HTML

div>Box 1div> div>Box 2div> div>Box 3div> 

CSS

body  display: flex; > div  background: yellow; width: 200px; height: 200px; margin: 0.5rem; padding: 0.5rem; > @media (orientation: landscape)  body  flex-direction: row; > > @media (orientation: portrait)  body  flex-direction: column; > > 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jun 21, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Html landscape orientation css

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

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

Бесплатные уроки CSS для начинающих

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

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

Managing screen orientation

The term screen orientation refers to whether a browser viewport is in landscape mode (that is, the width of the viewport is greater than its height), or else in portrait mode (the height of the viewport is greater than its width)

CSS provides the orientation media feature to allow adjusting layout based on screen orientation.

The Screen Orientation API provides a programmatic JavaScript API for working with screen orientation — including the ability to lock the viewport to a specific orientation.

Adjusting layout based on the orientation

One of the most common cases for orientation changes is when you want to revise the layout of your content based on the orientation of the device. For example, perhaps you want a button bar to stretch along the longest dimension of the device’s display. By using a media query, you can do this easily and automatically.

Let’s have an example with the following HTML code

ul id="toolbar"> li>Ali> li>Bli> li>Cli> ul> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est. p> 

CSS relies on the orientation media query to handle specific styles based on the screen orientation

/* First let's define some common styles */ html, body  width: 100%; height: 100%; > body  border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; > p  font: 1em sans-serif; margin: 0; padding: 0.5em; > ul  list-style: none; font: 1em monospace; margin: 0; padding: 0.5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; > li  display: inline-block; margin: 0; padding: 0.5em; background: white; > 

Once we have some common styles we can start defining a special case for the orientation

/* For portrait, we want the toolbar on top */ @media screen and (orientation: portrait)  #toolbar  width: 100%; > > /* For landscape, we want the toolbar stick on the left */ @media screen and (orientation: landscape)  #toolbar  position: fixed; width: 2.65em; height: 100%; > p  margin-left: 2em; > li + li  margin-top: 0.5em; > > 

Note: The orientation media query actually applies based on the orientation of the browser window (or iframe) not the orientation of the device.

Locking the screen orientation

Some devices (mainly mobile devices) can dynamically change the orientation of the screen based on their own orientation, ensuring that the user will always be able to read what’s on the screen. While this behavior is perfectly suited for text content, there is some content that can be negatively affected by such a change. For example, games based on the orientation of the device could be messed up by such a change of the orientation.

The Screen Orientation API is made to prevent or handle such a change.

Listening to orientation changes

The orientationchange event is triggered each time the device change the orientation of the screen and the orientation itself can be read with the Screen.orientation property.

.addEventListener("orientationchange", () =>  console.log(`The orientation of the screen is: $screen.orientation>`); >); 

Preventing orientation change

Any web application can lock the screen to suits its own needs. The screen is locked using the screen.orientation.lock() method and unlocked using the screen.orientation.unlock() method.

The screen.orientation.lock() method accepts one of the following values to define the kind of lock to apply: any , natural . portrait-primary , portrait-secondary , landscape-primary , landscape-secondary , portrait , and landscape :

It returns a promise that resolves after the lock succeeds.

Note: A screen lock is web application dependent. If application A is locked to landscape and application B is locked to portrait , switching from application A to B or B to A will not fire an orientationchange event because both applications will keep the orientation they had.

However, locking the orientation can fire an orientationchange event if the orientation had to be changed to satisfy the lock requirements.

See also

Found a content problem with this page?

This page was last modified on Jul 5, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Используем медиа запросы CSS3 для определения ориентации экрана

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

Ориентация

Медиа запрос ориентации позволяет использовать определённые стили для разных ориентаций экрана. Доступны две опции: landscape и portrait , которые используются для изменения шаблона страницы на основе ориентации экрана браузера.

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

/* Портретная ориентация шаблона */ @media screen and (orientation:portrait) < /* Стили для портретной ориентации шаблона */ >/* Ландшафтная ориентация шаблона*/ @media screen and (orientation:landscape) < /* Стили для ландшафтной ориентации шаблона */ >

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

Демонстрация с хамелеоном

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

Как устроена демонстрация

Рассмотрим внутренне устройство демонстрационной страницы.

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

/* Портретная ориентация*/ @media screen and (orientation:portrait) < body < opacity: 1; >> /* Ландшафтная ориентация*/ @media screen and (orientation:landscape) < body < opacity: 0; >>

Для переключения изображений тег body имеет непрозрачность 0 при ландшафтной ориентации и 1 при портретной ориентации.

Затухание при смене цвета

В браузерах , поддерживающих трансформации CSS3, смена ориентации сопровождается плавным затуханием цвета хамелеона.

Поддержка браузерами

Медиа запросы по-разному поддерживаются различными браузерами, но определение ориентации работает хорошо в следующих браузерах:

К сожалению Opera 10.5 (Presto 2.5) поддерживает все медиа запросы кроме ориентации.

Бонус: поддержка iPhone

Программное обеспечение iPhone не поддерживает медиа запрос ориентации, а для iPad релиз версии 4.0 отлично работает с ним.

Мы можем имитировать определение ориентации для iPhone с помощью медиа запросов min — и max-width , которые доступны в версиях начиная с 1.0.

/* Портретная ориентация */ @media screen and (max-width: 320px) < body < opacity: 1; >> /* Ландшафтная ориентация */ @media screen and (min-width: 321px) and (max-width: 480px) < body < opacity: 0; >>

Так как известно, что максимальная ширина экрана iPhone в режиме портретной ориентации составляет 320px, то мы используем данный факт. Для определения ландшафтной ориентации используется комбинация запросов min/max-width, которая доступна в CSS3. Свойство max-width позволяет избежать неприятных моментов для настольных систем.

Чтобы данные стили работали в iPhone нужно также использовать мета тег viewport :

Так iPhone будет выводить страницу в действительном масштабе, а не изменять автоматически размер для соответствия разрешению экрана.

Теперь фоновое изображение слишком большое

Использование данного тега приводит к том, что фоновое изображение выводится слишком большим для размеров iPhone. к счастью, есть свойство CSS3 background-size , которое поддерживается iPhone.

@media screen and (max-device-width: 480px) < html, body < -moz-background-size: 80% auto; -webkit-background-size: 80% auto; background-size: 80% auto; >>

Для того, чтобы использовать уменьшение фона с помощью свойства background-size для маленьких экранов, мы задействуем медиа запрос max-device-width , чтобы ограничить область применения масштабирования максимальной шириной экрана в 480px. Затем для тегов html и body мы устанавливаем ширину фона 80% от доступного пространства, а высота будет выставляться автоматически для сохранения пропорций изображения.

Но здесь есть другой момент

Изменение ориентации iPhone, также изменяет размер фонового изображения. Получается, что в ландшафтном режиме фоновое изображение больше, чем в портретном режиме. Для выравнивания размеров изображений мы используем свойство background-size для ландшафтного режима.

@media screen and (min-width: 321px) and (max-width: 480px) < html, body < -moz-background-size: 50% auto; -webkit-background-size: 50% auto; background-size: 50% auto; >body < opacity: 0; >>

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Перевел: Сергей Фастунов
Урок создан: 27 Сентября 2011
Просмотров: 44247
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник