Probleme avec ipad et iphone

Bonjour a tous,

Alors voila je suis assez nouveau dans le milieu du web design et j'ai eu la bonne idée de me lancé dans la réalisation d'un page vitrine pour une connaissance.

J'ai choisi de le réaliser avec bootstrap 3. Tout allais bien jusqu’à ce que je le test en ligne pour voir son rendu sur les différent devices.

Et là paf catastrophe j ai écrit un site qui ne fonctionne ni sur ipad ni sur iphone haaaaa ! j' en suis chauve :o.

plusieurs problème plutot embêtant ce présente à moi:

le premier que j aimerais régler rapidement est clairement sa compatibilité avec iphone et ipad.

dans cette section de problème j ai déjà le souci d'un background-image: je l'ai mis en "cover" mais voila partout il à une super taille et sur iphone ipad bah il est zoomé hardcore du coup ça ne ressemble à rien.

voici le code html :

<!--header-->
    <header class="masthead" id="img_header">
        <div class="container block_header">
            <div class="row">
                <span class="col-sm-1"></span>
                <div class="col-sm-3 text-center" id="glyphcentre">
                    <span class="glyphicon glyphicon-print blanc"></span>
                </div>
                <div class="col-sm-7">
                    <span class="col-sm-10 col-xs-11 ligne" ></span>
                    <h1 class="text-center strong" id="intro">SAY HELLO<br/>
                     TO MY <br/>
                     DIGITAL PRINTING<br/>
                     WORLD.
                     </h1>
                    <span class="col-sm-10 col-xs-11 ligne" ></span>
                </div>
                <span class="col-sm-1"></span>
 
            </div>
        </div>
    </header>
<!--fin header-->

voici mon css:

/*debut header*/  
.block_header{
    padding-top: 10%;
    }
#intro{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;  
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
    font-family:BebasNeue;
    font-weight:bold;
    letter-spacing:8px;
    text-align:left;
    font-size:600%;
    line-height:100%;
    color:rgba(250,250,250,0.7)
    }
    header {
      height:100%;
    min-height:500px;
}
 
#img_header{
    margin: 0 auto;
    background-attachment:scroll;
  background: url(../img/header.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
    }  
    
    
.blanc{
    color:rgba(250, 250, 250, 0.7);
    font-size: 600%;
    }
.ligne{
    bottom:15px;
    border-bottom:solid 5px;
    border-color:rgba(250, 250, 250, 0.7);
    } 
/*fin header*/

Voila je vais deja m'arreter au premier problème je prend toutes les critiques, je répond le plus rapidemet possible. please Help me asap je n' ai plus de cheveux je veux pas attaquer ma barbe
Modifié par john093e (25 Feb 2016 - 17:36)