Php 屏幕外div导致窗口仅在移动浏览器中展开_Php_Javascript_Html_Css

Php 屏幕外div导致窗口仅在移动浏览器中展开

php javascript html css

Php 屏幕外div导致窗口仅在移动浏览器中展开,php,javascript,html,css,Php,Javascript,Html,Css,我正在为学校的反欺凌计划建立一个网站，我试图加入一个有趣的动画背景。我认为移动的云看起来有点酷，所以我在背景中实现了它们。早些时候，我有一个错误，屏幕外的云会拉伸页面，并在页面底部添加一个水平滚动条。我通过使body div具有以下css样式来修复此问题： overflow:hidden; 这解决了桌面浏览器的问题，但当我在iPad和手机上查看该网站时，当云计算发展到这一点时，它让我可以滚动到一边。有人知道发生了什么事吗？多谢各位这是我的index.php文件： <!DOCTYPE h

我正在为学校的反欺凌计划建立一个网站，我试图加入一个有趣的动画背景。我认为移动的云看起来有点酷，所以我在背景中实现了它们。早些时候，我有一个错误，屏幕外的云会拉伸页面，并在页面底部添加一个水平滚动条。我通过使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>

下面是控制云移动和其他内容的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";
}

var windowheight=window.innerHeight-600；
var cloud=document.getElementById（“cloud1”）；
var cloudpos=Math.random（）*窗口高度；
cloud.style.top=cloudpos+'px'；
cloud.style.left='-600px'；
var-cloudx=-600；
var school=document.getElementById（“学校”）；
var peeps=document.getElementById（“人”）；
var t=setInterval（“movecloud（）”，1000/60）；
var cloudvel=0.5；
函数startCloud（）
{
cloudx=-600；
cloudpos=Math.random（）*窗口高度；
}
函数movecloud（）
{
cloudx=cloudx+cloudvel；
cloud.style.left=cloudx+“px”；
如果（cloudx>window.innerWidth）
{
startCloud（）；
}
}
变量日期=新日期（）；
var time=date.getUTCHours（）；
如果（时间<2 | |时间>16）
{
//如果白天
document.getElementById（“body”）.style.backgroundColor=“#81bcff”；
document.getElementById（“sunmoonimg”）.src=“sun.png”；
}
如果（time>=2&&time，而许多移动浏览器声称与HTML5兼容，那么截至本文发布之时，在实际支持某些样式属性方面存在许多已知问题，例如溢出

有关这方面的更多信息，请参阅以下文章：

浏览器移动支持的良好列表-
特别是在考虑jquery mobile时-
这篇文章有点老，但讨论了iphone特有的问题-
所以在Safari中发布iOS差异-
视口元标记上的伟大帖子-

最后一个可能是你答案的关键
希望这有帮助！
我的摩托罗拉droid没有问题（令人惊讶）。您是否尝试过创建一个具有溢出：隐藏；

的包装器div，而不是将其放在身体上？这在过去一直是我的问题。

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";
}