下面是我显示全屏背景图片的代码，还有一些检测设备宽度是否大于高度的基本函数:
.
.
.
<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>
它工作正常，除了它似乎无法在用户更改设备方向时正确刷新和显示图像。 如果在我在浏览器中输入站点之前设备已经处于横向模式，则没问题。
看图:
最佳答案
您的条件 if 实际上仅在您加载页面时调用。您必须使用事件处理程序来检测窗口大小调整，例如:
$(window).resize(function() {
if(window.innerHeight > window.innerWidth){
$.backstretch("Assets/Cover.jpg");
} else {
$.backstretch("Assets/Cover-Landscape.jpg");
}
});
编辑: 所以现在你还必须绑定(bind)它以便在加载时也被调用。
$(window).on("load resize",function(e){
if(window.innerHeight > window.innerWidth){
$.backstretch("Assets/Cover.jpg");
} else {
$.backstretch("Assets/Cover-Landscape.jpg");
}
});
这实际上会更好。
关于android - 用户更改方向后，网站无法正确显示全屏背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31880959/