fond plein écran htm5 mobile

Question

J'ai créé un fond d'écran plein qui semble convenir à tous les navigateurs, mais lors de la vérification sur un appareil mobile, il affiche comme ça.

C'est le css que je l'ai utilisé

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

J'ai aussi mis cela dans la tête

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

Je ne comprends pas vraiment ce que je l'ai fait mal ici.

Answer 1

Il n'y a pas de solution officielle pour que, comme tout le dispositif mobile ne possède pas le même comportement à ce sujet ...

Vous pouvez essayer cet extrait en trouve un jour que vous devez ajouter à votre en-tête de votre page:

<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

essayer de mettre votre élément :root à une position fixe, puis ajouter une pleine largeur et la hauteur comme comme celui-ci

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;*/ 
}