Page d'accueil mobile et texte disparaissant

Nous mettons en place une page d'accueil de base pendant que nous travaillons sur le site actuel. Le problème est que lorsque vous le regardez sur certains appareils mobiles, la plupart du texte semble aller au-dessus de l'écran en mode portrait/vertical. Tout se montre bien en mode paysage/horizontal.Page d'accueil mobile et texte disparaissant

Je ne sais pas à quoi cela ressemble sur les iPhones mais cela fonctionne sur mon HTC et sur un iPad.

Le problème est rapporté d'un Samsung Galaxy S3 (2 personnes m'ont dit la même chose). Lorsque l'utilisateur zoome, il peut déplacer le texte pour le voir. Je n'ai aucune marge négative dans le CSS et vraiment aucun moyen de savoir pourquoi cela se produit.

Est-ce que quelqu'un d'autre a ce problème et quelqu'un peut-il voir pourquoi cela se produirait?

Le site est ici: http://find-thespot.com/

HMTL:

<!DOCTYPE HTML> 
<html><head> 
<meta charset="utf-8"> 
<title>The Spot</title> 

<link rel="stylesheet" type="text/css" href="fonts/skyliner.css"> 
<link rel="stylesheet" type="text/css" href="fonts/underworld.css"> 
<link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

    <body> 
       <div class="container"> 
       <h3>Coming Soon</h3> 
       <h1>THE SPOT</h1> 
       <h2>LASER TAG & ARCADE </h2> 
       <a href="mailto:[email protected]" title="Contact Us">Contact Us</a> 
       </div> 

    </body> 
</html>

CSS

body { 
    font: 100%/1.4 Helvetica, Geneva, sans-serif; 
    background: url(imgs/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-color: #0e0904; 
    width:100%; 
    max-height: 100%; 
    color: #000000; 
} 

    .container { 
     width: 100%; 
     margin: 0 auto; 
     text-align:center; 
     margin-top:210px; 
    } 


    /* ~~ Element/tag selectors ~~ */ 


    h1{ 
     font-size:150px; 
     line-height:145px; 
     font-family: 'UnderWorldRegular', serif; 
     margin: 0; 
     /*font-weight:bold;*/ 
     word-wrap:break-word; 
     word-break: normal; 
    } 

    h2{ 
     font-size:62px; 
     line-height:60px; 
     font-family: 'UnderWorldRegular', serif; 
     margin: 0 0 25px; 
     /*font-weight:bold;*/ 
     word-wrap:break-word; 
     word-break: normal; 
    } 

    h3{ 
     font-size: 80px; 
     line-height:75px; 
     font-family: 'SkylinerRegular', sans-serif; 
     margin: 0 0 15px; 
     /*font-family: 'Didact Gothic', sans-serif;*/ 
     /*font-weight:bold;*/ 
     /*letter-spacing:2px;*/ 
    } 

    a{ 
     font-size: 25px; 
     color: #000; 
     text-decoration: underline; 
    } 


    a:hover, a:active, a:focus { 
     text-decoration: none; 
    } 



    /*Mobile CSS */ 

    @media (max-width: 1200px) { 
     h1{ font-size: 90px; line-height:95px;} 
     h2{font-size: 35px; line-height:38px;} 
     h3{font-size: 60px; line-height:50px;} 
     a{ font-size: 17px; line-height:16px; } 
     .container {margin-top: 120px;} 
    } 


    @media (max-width: 1025px) { 
     h1{ font-size: 70px; line-height:95px;} 
     h2{font-size: 30px; line-height:38px;} 
     h3{font-size: 35px; line-height:50px;} 
     a{ font-size: 17px; line-height:16px; } 
     .container {margin-top: 60px;} 
     body {background-image: url(imgs/bg-mob.jpg) !important; 
    } 

    @media (max-width: 770px) { 
     .container {margin-top: 60px;} 
    } 


    @media (max-width: 500px) { 
     h1{ font-size: 75px; line-height:75px;} 
     h2{ font-size: 30px; line-height:30px;} 
     h3{font-size: 40px; line-height:40px;} 
     .container {margin-top: 50px;} 
     /*a{ font-size: 13px; line-height:13px; }*/ 
     } 

     @media (max-width: 360px) { 
     .container {margin-top: 20px; min-width:200px;} 
     }

Source

2014-04-29 MattM

vous ne donnez pas assez d'informations, vous devez poster un code ou l'exemple sur jsFiddle – valerio0999

Désolé! Je viens de mettre à jour, je pensais avoir au moins mis un lien vers la page d'accueil. – MattM

l'étiquette de la fenêtre dans le <head> manque, ajoutez ce

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />

également ajouter ceci à votre css:

html {height:100%} 
body {height:100%}

cela devrait résoudre le problème

Source

2014-04-30 15:30:28 valerio0999

Parfait! Merci. – MattM

Page d'accueil mobile et texte disparaissant

Répondre

Questions connexes