在orientationchange事件后调整大小/位置div

Posted

技术标签:

【中文标题】在orientationchange事件后调整大小/位置div【英文标题】:Resize / position div after orientationchange event 【发布时间】:2014-05-12 11:41:33 【问题描述】:

我编写了一些简单的代码来侦听“orientationchange”(Safari/ios)事件,然后尝试将 div 的大小调整为新的窗口方向/大小。

问题是调整大小和定位没有按我预期的方式工作。我希望 div 调整大小(使用渐变背景)并填充屏幕。我附上了屏幕截图以突出显示问题。

如果有人能告诉我为什么我的代码不起作用,我将不胜感激。

我的测试是使用 Apple 的 iPhone 模拟器,打开 Safari(在模拟器上)并将其指向我的本地主机,其中包含以下测试代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div Resizing/positioning Test</title>

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
    .masterTemplate 
        position: absolute;
        left:0px;
        top:0px;
        background: -webkit-linear-gradient( -70deg, black 60%, navy );
        border: 1px solid magenta;
        overflow: hidden;
    
</style>
</head>
<body>
<div id="masterTemplate"></div>
<script>
    $(document).ready( function()  

        console.log("document ready");

        window.addEventListener("orientationchange", onOrientationChange );

        $("#masterTemplate").css(  width:window.innerWidth, height:window.innerHeight  );
        $("#masterTemplate").addClass("masterTemplate");

        function onOrientationChange(event) 
            console.log('onOrientationChange',event);
            $("#masterTemplate").removeClass("masterTemplate");
            $("#masterTemplate").css( width:window.innerWidth, height:window.innerHeight, top:"0px", left:"0px" );
            $("#masterTemplate").addClass("masterTemplate");
        

      );

</script>
</body>
</html>

【问题讨论】:

.masterTemplate height:100%;width:100% 怎么样? ...感谢您的回复。我已经尝试过你的建议,它没有任何区别。屏幕上的位置不正确。 【参考方案1】:

这似乎不对... -> 宽度:window.innerWidth,高度:window.innerHeight。如果您只想为 div 提供窗口宽度和高度,为什么不通过 css 设置呢?

width: 100%;
height: 100%;

【讨论】:

...感谢您的回复。我已经尝试过了,但它仍然无法正常工作。 div 的位置与显示的屏幕抓图相同。【参考方案2】:

尝试通过更改 javascript 代码来调整窗口大小:

相反 $("#masterTemplate").css( width:window.innerWidth, height:window.innerHeight );

使用 var clientWidth = jQuery(window).width(); var clientHeight = jQuery(window).height(); window.resizeTo( clientWidth,clientHeight )

其中clientWidthclientHeight 是以像素为单位的宽度和高度。

或者,如果您更喜欢使用 jQuery 选择器,请尝试:

$("#masterTemplate").css( width:jQuery(window).width(), height:jQuery(window).height() );

【讨论】:

您好,感谢您的回复。这个我也试过了,没什么区别。我的直觉是,它是专门针对移动怪癖的……遗憾的是,我的移动端 Javascript/HTML5 仍处于起步阶段……【参考方案3】:

在砖墙上敲了几个小时后,我似乎找到了自己问题的答案,并想发布它,因为它可以帮助那些处于 HTML5 移动开发早期阶段的其他人。

在某些情况下,您的计划可能涉及手动控制视口。如果不确定 Viewport 是什么,有很多很好的文章和配置示例,其中一篇是this link!

我的问题源于没有意识到我需要在设备每次旋转后重置(希望是正确的术语)视口。将以下代码添加到“orientationchange”事件处理程序中解决了我的问题:

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1.0')

我还将初始视口元配置修剪为:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

【讨论】:

以上是关于在orientationchange事件后调整大小/位置div的主要内容,如果未能解决你的问题,请参考以下文章

JQuery:如何仅在完成调整大小后才调用 RESIZE 事件?

WPF Toolkit DataGrid 列调整大小事件

在 SDL 2 中获取连续的窗口调整大小事件

调整大小的 UIView 上没有触摸事件

JS 如何获取和监听屏幕方向的改变?

javascript 事件处理