jQuery移动横向和纵向流

StackOverflow https://stackoverflow.com/questions/4253391

题

我已经开始使用s移动框架，但我似乎无法使用的横向和纵向的类minipulate风格。

文件说

HTML元素总是会有一类或"纵向"或"横向"，这取决于向浏览器或装置。

因此，我的印象是， <h1>foo</h1> 会是 <h1 class="landscape">foo</h1> 或 <h1 class="portrait">foo</h1>

但 h1.landscape { font-size:16px; } 和 h1.portrait { font-size:9px; } 似乎没有工作。

如果任何人都可以闪耀的一些光在此它将不胜感激。

有帮助吗？

解决方案

"确定"。我决定看什么去，并使用卷，以获得源代码，用于通过安卓图。

$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的 脚上述工作的罚款。

其他提示

不好意思，那个过时了！ 由于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; }

把这个在一个律插件

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

        }
    }

下面是在不同的装置进行测试的全工作版本（基于菲尔代码）：）

我敢肯定，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');
    }
}

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

由于

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top