android chrome全屏在旋转时向下移动25px [英] android chrome fullscreen moves 25px down on rotate
问题描述
此javascript和HTML会抛出带有红色背景的div。该外部div包含两个内部div：
This javascript and HTML throws up a div with a red background. This outer div contains two inner divs:
（i）25像素高的绿色条绝对位于其父级底部
(i) A 25px high green bar set absolutely to the bottom of its parent
（ii）一个 toggleFullScreen按钮。
(ii) A "toggleFullScreen" button.
加载页面时，将调用resize_page（）来设置红色div的尺寸：
When the page loads, resize_page() is called to set the dimensions of the the red div fit either:
（a）浏览器客户端窗口或...
(a) the browser client window or...
（b）设备屏幕
...取决于isDocumentInFullScreenMode（）的结果（从https://developer.mozilla.org/zh-CN/docs/Web/ API / Document / mozFullScreen）。
...depending on the result of isDocumentInFullScreenMode() (cut-and-paste from https://developer.mozilla.org/en-US/docs/Web/API/Document/mozFullScreen).
旋转设备（我的设备是S3），然后再次调用resize_page（）来使页面适应得很好。
Rotate the device (mine's an S3) and resize_page() gets called again to make the page fit nicely.
现在单击切换全屏按钮以调用toggleFullScreen（从https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API剪切并粘贴）然后再次调用resize_page（）来设置正确的尺寸。
Now click on the "Toggle Fullscreen" button to call toggleFullScreen (cut-and-paste from https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) and resize_page() is called again to set the correct dimensions.
但是，如果我们旋转设备，则红色div看起来很像。精确缩小25个像素，因此绿色div消失。
But then if we rotate the device it seems that the red div is moved down exactly 25 pixels and accordingly the green div disappears.
请注意以下元设置：content = width = device-width，height = device-height，initial-scale = 1.0，maximim-scale = 1.0，user-scalable = no
Note the meta settings : content="width=device-width, height=device-height, initial-scale=1.0, maximim-scale=1.0, user-scalable=no"
很显然，我希望整个精心制作的Web应用程序仍对我的用户但是如何？从屏幕高度上取走25px是一个可怕的技巧。
Obviously I would like the whole of my carefully crafted web app to still be visible to my user. But how ? Take away 25px from the screen height would be one horrible hack.
任何人都可以提出更明智的建议吗？
Can anyone suggest something more sensible ?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximim-scale=1.0, user-scalable=no"/>
<base target="_top">
<script language="JavaScript">
window.onload = resize_page;
window.onresize = resize_page;
function resize_page() {
var main_div = document.getElementById('main');
if (isDocumentInFullScreenMode())
{
var height = screen.height;
var width = screen.width;
main_div.style.height = height + 'px';
main_div.style.width = width + 'px';
}
else
{
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
main_div.style.height = height + 'px';
main_div.style.width = width + 'px';
}
}
function ToggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
function isDocumentInFullScreenMode() {
// Note that the browser fullscreen (triggered by short keys) might
// be considered different from content fullscreen when expecting a boolean
return ((document.fullscreenElement && document.fullscreenElement !== null) || // alternative standard methods
document.mozFullScreen || document.webkitIsFullScreen); // current working methods
}
</script>
</head>
<body>
<div id="main" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:#aa0000;">
<div style="position:absolute;top:50px;left:50px;width:200px;height:50px;background-color:#0000aa;font-size:15px" onclick="ToggleFullScreen()">Toggle Fullscreen</div>
<div style="position:absolute;bottom:0px;left:0px;right:0px;height:25px;background-color:#00aa00"></div>
</div>
</body>
</html>
推荐答案
一种可能的解决方法是在方向变化事件。随后的窗口调整大小事件导致对resize_page（）的调用以使所有内容都适合。不幸的是，我们现在已经退出全屏模式，而我们的用户没有要求。尝试：使用智能手机访问 http://jsdo.it/cricketter/IDSo ，然后点击
One possible workaround is to get out of fullscreen on an orientationchange event. The subsequent window resize event results in a call to resize_page() to make everything fit. Unfortunately we have now exited fullscreen mode without our user asking for this. To try: access http://jsdo.it/cricketter/IDSo with a smart phone and click on the "smart phone" button on the upper right.
window.addEventListener("orientationchange",unFullscreen,false);
function unFullscreen() {
if (isDocumentInFullScreenMode())
{
ToggleFullScreen();
}
}
这篇关于android chrome全屏在旋转时向下移动25px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
