[英]Zooming webpage then clicking back button changes the background size on the previous page
I have two webpages that consist of a scrollable div as the main wrapper and an image background styled like 我有两个网页,其中包含一个可滚动的div作为主要包装器,以及一个图像背景,其样式类似于
body
{
background: url("../Images/background.jpg") center bottom no-repeat;
z-index:-5;
background-size:cover;
}
When I zoom in or out, the scrollable div changes sizes and the background does not. 当我放大或缩小时,可滚动的div会更改大小,而背景不会更改。 That is exactly what I want to happen.
这正是我想要发生的事情。
However, if I zoom in on one page then click the browser's back button, the background is zoomed out on the previous page. 但是,如果我放大一页,然后单击浏览器的“后退”按钮,则背景将在前一页上缩小。 If I refresh the page the background is fixed and everything is displayed correctly again.
如果刷新页面,背景将固定,并且一切都将正确显示。 If I zoom then click a link to the previous page instead of clicking back in the browser window, the page is displayed correctly.
如果我缩放然后单击指向上一页的链接,而不是在浏览器窗口中单击回来,则该页面将正确显示。 I have tried using the hidden field
我尝试使用隐藏字段
<input type="hidden" id="refresh" value="no"/>
with the following script 使用以下脚本
<script type="text/javascript">
$(window).load(function (e) {
var $input = $('#refresh');
$input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
</script>
to reload the page one time after its initial load hoping that the background would resize, but it does not. 在初始加载一次后重新加载页面,希望背景会调整大小,但不会。 only clicking the browser refresh button will fix it.
仅单击浏览器刷新按钮即可修复它。 Any suggestions as to how to handle this would be extremely helpful.
关于如何处理此问题的任何建议将非常有帮助。
使用$(window).resize()
评分器而不是$(window).load()`,如果问题出在缩放或调整大小上可能会有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.