我正在为我学校的一个反欺凌计划建立一个网站，我试图包括一个有趣的动画背景。我认为移动的云看起来很酷，所以我将它们应用到背景中。早些时候，我有一个错误，屏幕外的云会拉伸(stretch)页面并在页面底部添加一个水平滚动条。我通过使 body div 具有此 css 样式来解决此问题:
overflow:hidden;
这解决了桌面浏览器的问题，但是当我在我的 iPad 和手机上查看网站时，它会让我在云进展到那个点时滚动到一边。有没有人对发生的事情有任何想法？谢谢。
这是我的 index.php 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="jquery.js"></script>
<title>
Stop It!
</title>
</head>
<body id="body">
<div id="env">
<img class="envimg" id="people" src="peeps.png" alt="people" />
<img class="envimg" id="school" src="school.png" alt="school" />
</div>
<div id="sunmoon">
<img id="sunmoonimg" src="sun.png" alt="sun" />
</div>
<div id="grass"></div>
<div class="cloud" id="cloud1"><img src="cloud.png" /></div>
<script type="text/javascript" src="environment.js"></script>
</body>
</html>
这是我的样式表:
*
{
margin:0px;
padding:0px;
}
#grass
{
left: 0px;
background-repeat: repeat;
background-image: url(grass.jpg);
bottom:0px;
margin:0px;
position:absolute;
padding:0px;
font-size:15px;
height: 200px;
width: 100%;
}
#env
{
z-index: 1;
position:absolute;
height:500px;
bottom:0px;
width:100%;
left:0px;
}
.envimg
{
bottom:0px;
position:absolute;
float:left;
display:block;
margin-left:auto;
margin-right:auto;
}
#people
{
right: 50%;
left: 50%;
margin-right: -439px;
margin-left: -438px;
z-index:2;
}
#school
{
right: 50%;
left: 50%;
margin-right: -300px;
margin-left: -300px;
margin-bottom: 0px;
z-index:1;
}
body, html
{
overflow:hidden;
}
.cloud
{
bottom: 0px;
left: -600px;
position:absolute;
}
#sunmoon
{
position:absolute;
top:100px;
right:200px;
z-index:-1;
height:300px;
}
#sunmoonimg
{
height:300px;
}
#content
{
display:block;
margin-left:auto;
margin-right:auto;
width:1000px;
margin-top:50px;
background-color:white;
}
这是控制云移动和其他一些内容的 javascript 文件:
var windowheight = window.innerHeight - 600;
var cloud = document.getElementById("cloud1");
var cloudpos = Math.random() * windowheight;
cloud.style.top = cloudpos + 'px';
cloud.style.left = '-600px';
var cloudx = -600;
var school = document.getElementById("school");
var peeps = document.getElementById("people");
var t = setInterval("movecloud()",1000/60);
var cloudvel = 0.5;
function startCloud()
{
cloudx = -600;
cloudpos = Math.random() * windowheight;
}
function movecloud()
{
cloudx = cloudx + cloudvel;
cloud.style.left = cloudx + "px";
if(cloudx > window.innerWidth)
{
startCloud();
}
}
var date = new Date();
var time = date.getUTCHours();
if (time < 2 || time > 16)
{
//if day time
document.getElementById("body").style.backgroundColor = "#81bcff";
document.getElementById("sunmoonimg").src = "sun.png";
}
if (time >= 2 && time <= 16)
{
//if night time
document.getElementById("body").style.backgroundColor = "#243447";
document.getElementById("sunmoonimg").src = "moon.png";
}
这是我的站点的链接，其中包含一个演示: http://www.keirp.com/stopit
最佳答案
虽然许多移动浏览器声称与 HTML 5 兼容，但截至本文发布时，对于某些样式属性(例如 overflow)的实际支持存在许多已知问题。
有关这方面的更多信息，请参阅这些文章:
- 良好的浏览器移动支持列表 - http://www.quirksmode.org/m/css.html
- 特别是在考虑 jquery mobile 时 - http://jquerymobile.com/test/docs/pages/touchoverflow.html
- 这个有点旧，但讨论了 iphone 的具体问题 - http://blog.bahrenburgs.com/2009/11/div-overflow-and-iphone-browsing.html
- SO 在 Safari 中发布 iOS 差异 - List of known "Safari on iPad" differences over "Desktop Safari"
- 关于视口(viewport)元标记的精彩帖子 - https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
最后一个可能是您找到答案的关键。
希望这对您有所帮助!
关于php - Offscreen div 导致窗口仅在移动浏览器中展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9287512/