jquery - HTML/jQuery 在 iOS 设备方向变化时弹出未居中对齐

Question

我正在尝试使用 居中对齐视频弹出窗口，

$('#videoid').css("top", (($(window).height() - $('#videoid').outerHeight()) / 2) + $(window).scrollTop() + "px");
$('#videoid').css("left", (($(window).width() - $('#videoid').outerWidth()) / 2) + "px");

当我在 Android 手机中进行方向更改时，它工作得很好，但在 iOS 手机和 iPad 中，当方向更改(纵向到横向)时，弹出窗口向上移动。它没有对齐中心。

我的 videoid CSS 是

#videoid {<br/>
height: auto;<br/>
max-height: 230px;<br/>
min-height: 150px;<br/>
position: absolute;<br/>
width: 70%;<br/>
}

弹出窗口在宽度方向居中对齐，但在高度方向弹出窗口向上移动。任何帮助建议表示赞赏。提前致谢。

我发现 <div id="videoid"> 的高度轮流改变。任何控制高度的解决方案。

Answer 1

因为您的元素正在改变高度，位置不再与元素的高度相关。您需要重新计算。

参见 this solution关于如何在方向更改时触发代码。