jquery мобильный пейзаж и портрет класс
-
27-09-2019 - |
Вопрос
Я начал использовать мобильную рамку jQuery, но я не могу использовать ландшафтные и портретные классы для минимума стилей.
Документация говорит
Элемент HTML всегда будет иметь класс «портретной» или «ландшафта», в зависимости от ориентации браузера или устройства.
так что я под началом впечатления, что <h1>foo</h1>
будет либо быть <h1 class="landscape">foo</h1>
или <h1 class="portrait">foo</h1>
все же h1.landscape { font-size:16px; }
и h1.portrait { font-size:9px; }
Похоже, не работает.
Если кто-то мог пролить свет на это, это было бы очень ценится.
Решение
в порядке. Я решил посмотреть, что происходит и использовал скручивание, чтобы получить исходный код через Android View.
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.actwebdesigns.co.uk');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2');
$html = curl_exec($ch);
echo $html;
Единственный элемент, имеющий ландшафт или портрет класс, является тегом HTML.
<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></html>
Я также заметил, что каркас не автоматически переключает класс на вращение, поэтому следующий код, который я проверен.
<script type="text/javascript">
$(window).resize( function(){
$('html').toggleClass('landscape, portrait');
});
</script>
Лом выше, у которого есть недостатки.
<script type="text/javascript">
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
var ob = $('html');
if( width > height ) {
if( ob.hasClass('portrait') ) {
ob.removeClass('portrait').addClass('landscape');
}
}else{
if( ob.hasClass('landscape') ) {
ob.removeClass('landscape').addClass('portrait');
}
}
});
</script>
используя ливь от Томми Лаукканен Сценарий выше, работает нормально.
Другие советы
Извините, но это устарело! Поскольку HTML5 у вас есть в CSS3 MediaQueries. Теперь вы можете решить стиль в CSS:
@media screen and (orientation: landscape) {
h1 {
color: red;
}
#someId {
width: 50%;
}
}
@media screen and (orientation: portrait) {
h1 {
color: blue
}
#someId {
width: 100%;
}
}
Портрет и ландшафтные классы добавляют в элемент HTML (не каждый элемент на странице), поэтому вы хотите, чтобы селектор CSS искать первый ландшафт / портрет. Следующие работы:
html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }
положить это в плагин Lil
(function($){
$.fn.portlandSwitch = function ( options ) {
// redefine styles to either landscape or portrait on phone switch
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
var ob = $('html');
if( width > height ) {
if( ob.hasClass('portrait') ) {
ob.removeClass('portrait').addClass('landscape');
}
}else{
if( ob.hasClass('landscape') ) {
ob.removeClass('landscape').addClass('portrait');
}
}
});
}
})(jQuery);
$.portlandSwitch();
Используйте эту функцию:
//Detect change rotation
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
alert('landscape');
$('body').addClass('landscape');
$('body').removeClass('portrait');
break;
default:
alert('portrait');
$('body').addClass('portrait');
$('body').removeClass('landscape');
break;
}
}
Вот полностью работающая версия (на основе кода Phil Jackson) тестировала на разных устройствах :)
Я уверен, что jQuery Mobile используется для обработки этого, однако у меня другая рабочая версия, которая основана на ориентации экрана, однако я думаю, что это будет лучше из-за той простоты ...
if($(window).width() > $(window).height()){
if($('body').hasClass('portrait')){
$('body').removeClass('portrait').addClass('landscape');
} else if(!$('body').hasClass('portrait')) {
$('body').addClass('landscape');
}
}
else {
if($('body').hasClass('landscape')){
$('body').removeClass('landscape').addClass('portrait');
} else if(!$('body').hasClass('landscape')) {
$('body').addClass('portrait');
}
}
Это добавляет портретный или ландшафтный класс, вам не нужно сложно, что в ваш файл шаблона :)
Спасибо