jQuery移动风景和肖像类

我已经开始使用jquery移动框架，但我似乎无法使用风景和肖像类来缩小样式。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; }似乎并没有工作下。

如果任何人都可以照耀一下这一点，它将不胜感激。

来源

2010-11-23 Phil Jackson

好的。我决定看看发生了什么，并使用curl通过android视图获取源代码。

$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>

使用从Tommi Laukkanen's脚本以上工作正常。

来源

2010-11-23 07:05:07

jQuery Mobile的做这个自动为您。 – dave1010 2011-03-01 16:46:59

纵向和横向类被添加到html元素（不是页面上的每个元素），所以你希望CSS选择器首先寻找风景/肖像。以下作品：

html.landscape h1 { font-size:16px; } 
html.portrait h1 { font-size:9px; }

来源

2011-02-28 23:47:38 JohnTESlade

把它放进一个可爱的小插件

(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();

来源

2011-07-29 11:48:20

不好意思，那个过时！由于您在CSS3 MediaQueries中使用了HTML5。现在你可以在CSS决定风格：

@media screen and (orientation: landscape) { 

h1 { 
    color: red; 
} 

#someId { 
    width: 50%; 
} 

} 

@media screen and (orientation: portrait) { 

h1 { 
    color: blue 
} 

#someId { 
    width: 100%; 
} 

}

来源

2012-07-25 07:24:42 JonT

使用此功能：

//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; 

     } 
    }

来源

2013-10-28 09:36:41

下面是一个完全正常工作版本（基于菲尔·杰克逊的代码），在不同的设备:)

测试

我相信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'); 
    } 
}

这增加了纵向或横向类，你不需要硬编码到您的模板文件：

感谢

来源

2014-01-22 13:26:32

jQuery移动风景和肖像类

回答

相关问题