Определить ориентацию устройства - PullRequest
Новая
       30

Определить ориентацию устройства

0 голосов
/ 18 октября 2018

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

Определение устройств и размеров области просмотра не было задачей, построенной на единообразных процедурах.Мне кажется, что при условии, что у пользователей относительно современные браузеры, CSS3 и вызов @media screen and (orientation:landscape) - самая безопасная ставка.

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

<div class="box" style='background:  url("https://somewhere.amazonaws.com/general-purpose-images/splash.jpg") no-repeat fixed; background-size: 100% 100%; background-attachment: scroll;'>

Как это можно эффективно переключать в соответствии с ориентацией?

1 Ответ

0 голосов
/ 21 октября 2018

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

<div class="img_a">

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

@media screen and (orientation: portrait)
  { div.img_a 
      { background: url(https://[...]img_a.jpg) no-repeat fixed; }
  [...] }
@media screen and (orientation: landscape)
  { div.img_a 
      { background: url(https://[...]img_a_horizontal.jpg) no-repeat fixed; }
  [...] }
...