4

我已经开始使用 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; }似乎并没有工作。

如果有人能对此有所了解，将不胜感激。

4

6 回答 6

5

行。我决定看看发生了什么，并使用 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 的脚本中的一个 liitle 可以正常工作。

于 2010-11-23T07:05:07.373 回答
5

对不起，那已经过时了！从 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%;
 }

}
于 2012-07-25T07:24:42.793 回答
3

纵向和横向类被添加到 html 元素（不是页面上的每个元素），因此您希望 css 选择器首先查找横向/纵向。以下作品：

html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }
于 2011-02-28T23:47:38.630 回答
0

把它放在一个 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();
于 2011-07-29T11:48:20.690 回答
0

使用这个功能：

//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-28T09:36:41.420 回答
0

这是在不同设备上测试的完整工作版本（基于 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');
    }
}

这会添加纵向或横向类，您无需将其硬编码到模板文件中：)

谢谢

于 2014-01-22T13:26:32.120 回答