用户更改方向后，网站无法正常显示全屏背景

时间：2015-08-07 15:02:53

标签： android jquery html css

下面是我显示全屏背景图像的代码，还有一些基本功能，用于检测设备的宽度是否大于高度：

.
.
.
<script src="srobbin-jquery-backstretch-241a345/jquery.backstretch.min.js"></script>
.
.
.
<body>
    <script>
    if(window.innerHeight > window.innerWidth)
    {
        $.backstretch("Assets/Cover.jpg");
    }
    else
    {
        $.backstretch("Assets/Cover-Landscape.jpg");
    }
    </script>
</body>
</html>

它工作正常，只是当用户更改设备的方向时，它似乎无法正确刷新和显示图像。 如果在我在浏览器中输入网站之前设备已经处于横向状态，那么就可以了。

见图：

enter image description here

1 个答案:

答案 0 :(得分：3)

实际上只有在加载页面时才会调用条件if。您必须使用事件处理程序来检测重新调整大小的窗口，如：

$(window).resize(function() {
  if(window.innerHeight > window.innerWidth){
    $.backstretch("Assets/Cover.jpg");
  } else {
    $.backstretch("Assets/Cover-Landscape.jpg");
  }
});

修改 所以现在你还必须将它绑定到也可以在加载时调用。

$(window).on("load resize",function(e){
  if(window.innerHeight > window.innerWidth){
    $.backstretch("Assets/Cover.jpg");
  } else {
    $.backstretch("Assets/Cover-Landscape.jpg");
  }
});

这实际上会更好。

相关问题
最新问题