Question

我正在尝试根据当前页面宽度向页面添加某些样式。我希望这能在现场发挥作用。例如，在iPhone上查看并在查看已加载的页面时旋转屏幕时，css将会更改。另外，我最好使用移动jquery库。在此先感谢您的帮助。这是我到目前为止似乎没有用的东西，我也试过使用LiveQuery，但这也没有用

$(function() {
    $(document).live('css_init', function() {
           if (($(window).width()) > 430) {
                $('#main_panels .next').addClass("next-wide");
                $('#main_panels .prev').addClass("prev-wide");

           };
       });
       $(document).trigger('css_init');
});

Answer 1

立即停止，选择全部并点击键盘上的退格/删除键。

现在恐惧已经消失，让我向你介绍Media Queries。所有现代移动设备（即具有完整Web浏览器但不具有WAP门户的设备）完全支持此功能。它现在也在现代桌面浏览器中得到广泛支持。唯一的例外是IE＆lt; 9，为此，你有Respond.js。

现在，去了解网络标准的荣耀。

Answer 2

你能使用jquery resize事件监听器吗？

myFunction() {
    var w = $(window).width();
    if (w > 430){
        // do stuff
    };
}
$(window).resize(function(){
    myFunction();
}

Answer 3

CSS媒体查询应该在没有javascript的情况下执行您想要的操作。

尝试这样的事情：

<link rel='stylesheet' media='screen and (orientation:landscape)' href='css/landscape.css' />

您可能想要添加一些硬分辨率约束，但这很容易做到。

http://css-tricks.com/css-media-queries/

根据页面宽度更改CSS实时

3 个答案: