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

Используя комбинацию 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>

источник

2011-02-01 Kyle Parker

Напоминаю, что iPhone (3 и 3GS) сообщает о ширине экрана 480px * независимо от его ориентации. Кстати, вы можете прочитать этот вопрос, чтобы узнать, есть ли там что-нибудь полезное: [Может ли JS/jQuery определять ориентацию iPhone?] (Http://stackoverflow.com/questions/2323281/can-js-jquery- define-the-orientation-of-the-iphone) –

Вы можете сделать это без 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/

источник

2011-02-01 17:02:49

Спасибо за идею, и мне удалось сделать частичное обходное решение, установив ширину до 100% и высоту до 320 пикселей. Таким образом, в портрете он квадратный и в ландшафте это соотношение 3: 2, и оба выглядят хорошо. Однако это выглядит плохо в браузере для настольных компьютеров. Итак, есть ли способ для меня сказать с помощью javascript if (width> 500), тогда width = "X" и height = "Y"? –

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

Я бы ссылался на высоту и ширину окна в 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))

источник

2011-02-01 21:03:50

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

ответ

Смежные вопросы