jquery - 某些功能在纵向布局中不起作用

Question

我需要根据浏览器窗口大小调整图像大小

window.onload = function(){

var x = $(window).innerWidth();
var y = $(window).innerHeight();

if (x > y) { land(); }
else { port(); }

function land() {
    $('#slide').css('width', x/2);  // works
    //all other lines here work
};

然后我将 Firefox 窗口调整为纵向布局，清除缓存并重新加载页面（F5）

function port() {
    alert (x);  // works correctly
    $('#slide').css('width', x/2);  // doesn't work
        //many other lines here don't work
    };
}

Answer 1

实际上， img 已正确调整大小。您的问题是#ulBack. #ulBack因为您不适用它，所以会以纵向模式隐藏您的img display:none。

每种显示模式都有一个 css 文件：

<link href="css/gallery_port.css" rel="stylesheet" media="screen and (orientation:portrait)"/>
<link href="css/gallery_land.css" rel="stylesheet" media="screen and (orientation:landscape)"/>

你申请display:nonein#ulBack但gallery_land.css不是 in gallery_port.css。我通过删除display:nonein对其进行了测试，并且在模式下gallery_land.css遇到了同样的问题。landscape