Изменить размер встроенного видео в зависимости от ориентации мобильного устройства - PullRequest
Новая
       33

Изменить размер встроенного видео в зависимости от ориентации мобильного устройства

1 голос
/ 01 февраля 2011

Используя комбинацию HTML и JS, как я могу определить, находится ли устройство в альбомной или книжной ориентации, а затем соответствующим образом изменить размер встроенного видео?

Я знаю, что довольно простой способ определить ориентацию экрана - сравнить ширину с высотой и посмотреть, какая из них больше. Но как я мог тогда использовать эти переменные в коде для встраивания видео? Код от Vimeo: 

<iframe src="http://player.vimeo.com/video/15813517?title=0&amp;byline=0&amp;portrait=0" width="320" height="480" frameborder="0"></iframe><p><a href="http://vimeo.com/15813524" rel="external">RCE: A Different Kind of Experience</a> from <a href="http://vimeo.com/user3163610">John D. Low</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

Ответы [ 2 ]

0 голосов
/ 02 февраля 2011

Я бы сослался на высоту и ширину окна в javascript. 

var h = window.innerHeight;
var w = window.innerWidth;

Когда высота больше, устройство является портретным, и наоборот.Затем увеличьте ширину видео до 100% и выберите фактические пиксели ширины видео в javascript, затем разделите ширину на соотношение, которое требуется для получения высоты.

Я бы использовал что-то вроде обнаружения изменений. 

(function oriChange(window){
    var h = window.innerHeight;
    var w = window.innerWidth;
    if(h > w){
        //portait
    }else{
       //landscape
    }

    setTimeout(function(){oriChange},500)
}(window))
0 голосов
/ 01 февраля 2011

Вы можете сделать это без JS, изменив размеры окон iFrame с помощью CSS.Посмотрите на медиа-запросы CSS3.Они позволяют устанавливать различные макеты в зависимости от размера браузера и работать с большинством современных браузеров.

Спецификация W3C: http://www.w3.org/TR/css3-mediaqueries/

Хорошая статья ALA: http://www.alistapart.com/articles/responsive-web-design/

Другой ресурс: http://www.thecssninja.com/css/iphone-orientation-css

Простой способ начать с ними - использовать что-то вроде Less Framework: http://lessframework.com/

...