html - 全屏背景htm5手机

Question

我创建了一个似乎适合所有浏览器的全屏背景，但是在移动设备上检查时，它会像这样显示。

这是我用过的css

   @font-face
{
font-family: myFirstFont;
src: url('LeagueGothic-Regular_0.otf')
}


html {   
background: url(splash.png) no-repeat center center fixed;   
-webkit-background-size: cover;   
-moz-background-size: cover;   
-o-background-size: cover;   
background-size: cover; 
text-align:center;
}
#logo {
margin:0 auto;
}

#main {
margin:0 auto;
width:1200px;

}

p {
font-family:myFirstFont;
color:white;
font-size:30pt;
}

#comingsoon {
margin:0 auto;
}

我也把这个放在头上

<meta name="viewport" content="width=device-width, user-scalable=yes">

我真的不明白我在这里做错了什么。

Answer 1

对此没有官方解决方案，因为所有移动设备都没有相同的行为......

您可以尝试在某一天找到需要添加到页面标题的代码段：

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />

<script type='text/javascript'>
window.addEventListener('load', function(e) {
 setTimeout(function(){ 
  window.scrollTo(0, 1); 
 }, 1);
}, false);
</script>

Answer 2

尝试将您的:root元素设置为固定位置，然后像这样添加完整的宽度和高度

html {   
background: url(splash.png) no-repeat center center fixed;   
-webkit-background-size: cover;   
-moz-background-size: cover;   
-o-background-size: cover;   
background-size: cover; 
text-align:center;
width:100%;
height:100%;
position:fixed;
top;0;
left:0;
right:0;
bottom:0;
overflow-y:scroll;/* or overfow-y:auto;*/
}