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:none应用于#ulBack中的gallery_land.css，而不是gallery_port.css。我通过删除display:none中的gallery_land.css对其进行了测试，我在landscape模式下遇到了同样的问题。

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

1 个答案: