当前位置： 文江博客话题详情

jQuery移动横向和纵向类

发布于 2024-10-04 14:56:21 字数 408 浏览 5 评论 0原文

我已经开始使用 jquery 移动框架，但我似乎无法使用横向和纵向类来最小化样式。

文件说

HTML 元素始终具有“纵向”或“横向”类别，具体取决于浏览器或设备的方向。

所以我的印象是

foo

要么是

foo

 要么 <代码>

foo

还是h1.landscape { font-size:16px; } 和 h1.portrait { font-size:9px; } 似乎不起作用。

如果有人能对此有所启发，我们将不胜感激。

原文

I've started using the jquery mobile framework yet I cannot seem to use the landscape and portrait classes to minipulate styles.

documentation says

The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device.

so I am under the impression that <h1>foo</h1> would either be <h1 class="landscape">foo</h1> or <h1 class="portrait">foo</h1>

yet h1.landscape { font-size:16px; } and h1.portrait { font-size:9px; } doesn't seem to work.

If anyone could shine some light on this it would be much appreciated.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（6）

要走干脆点 2024-10-11 14:56:21

好的。我决定看看发生了什么，并使用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 的小标题 上面的脚本工作正常。

ok. I decided to see whats going on and used curl to get the source code via 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;

The only element that has the landscape or portrait class is the html tag.

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

I have also noticed that the framework does not auto switch the class on rotation so the following code which i've tested works.

<script type="text/javascript">
$(window).resize( function(){
    $('html').toggleClass('landscape, portrait');
});
</script>

scrap the above that has flaws.

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

using a liitle from Tommi Laukkanen's script the above works fine.

回复 原文
分开我的手 2024-10-11 14:56:21

抱歉，但这已经过时了！
从 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%;
 }

}

Sorry but that is out of date!
Since HTML5 you have in CSS3 MediaQueries.
Now you can decide the style in CSS:

@media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}
回复 原文
記柔刀 2024-10-11 14:56:21

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

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

The portrait and landscape classes are added to the html element (not every element on the page), so you want the css selector to look for the landscape/portrait first. The following works:

html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }
回复 原文
空城之時有危險 2024-10-11 14:56:21

将其放入 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();

put this in a lil plugin

(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();
回复 原文
怪我太投入 2024-10-11 14:56:21

使用这个函数：

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

        }
    }

Use this function:

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

        }
    }
回复 原文
累赘 2024-10-11 14:56:21

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

这添加了纵向或横向类，您不需要将其硬编码到模板文件中:)

谢谢

Here is a fully working version (based on Phil Jackson code) tested on different devices :)

I'm sure jQuery Mobile used to handle this, however I've another working version which is based on screen orientation, however I think this would be better due to it simplicity...

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

This adds the portrait or landscape class, you don't need to hard-code that to your template file :)

Thanks

回复 原文
~没有更多了~

关于作者

笑叹一世浮沉

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

玍銹的英雄夢

文章 0 评论 0

我不会写诗

文章 0 评论 0

十六岁半

文章 0 评论 0

浸婚纱

文章 0 评论 0

qq_kJ6XkX

文章 0 评论 0

旧伤还要旧人安

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文