Le centrage n'est pas possible sur tous les navigateurs mobiles - le navigateur normal fonctionne à merveille

Question

Le centrage n'est pas possible sur tous les navigateurs mobiles - le navigateur normal fonctionne à merveille

Demandé el 18 de Février, 2013: Quand la question a-t-elle été
2542 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Bizarrement, j'ai un problème bizarre avec le centrage des divs pour les navigateurs mobiles. Comme le dit mon titre : navigateur normal de pc fonctionne très bien - nada problemo =D mais ces appareils mobiles mais ces appareils mobiles laissent mon contenu principal (sous la section bouton) coller à la gauche. J'ai essayé beaucoup de choses - j'ai cherché des solutions ici sur stackoverflow aussi - mais les conseils donnés ne m'ont pas aidé jusqu'à présent ... jusqu'à présent ... la dernière chose que j'ai été en mesure de centre était d'utiliser jQuery - mais je ne veux pas relayer sur ce point.

Voici le code :

<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link href="css/configcss.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="MM_preloadImages('pictures/Layout/Button/homeo.png','pictures/Layout/Button/grafiko.png','pictures/Layout/Button/webo.png','pictures/Layout/Button/reklamo.png','pictures/Layout/Button/fotoo.png','pictures/Layout/Button/videoo.png','pictures/Layout/Button/muziko.png')">
<div id="headbackground">
    <div id="headcontent">
      <div id="language"> <a href="index.html"><img src="pictures/tr.png" width="40" height="24" alt="tr"></a>
      <br><br>
      <a href="de/"><img src="pictures/de.png" width="40" height="24" alt="de"></a> 
      <br><br>
      <a href="en/"><img src="pictures/en.png" width="40" height="24" alt="en"></a>  
      </div> 
</div>
  <div id="buttons">
    <div id="navimiddle"><a href="stackoverflow.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','pictures/Layout/Button/homeo.png',1)"><img src="pictures/Layout/Button/homeo.png" alt="homebutton" width="190" height="50" id="home"></a><a href="tr/grafik/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('grafik','','pictures/Layout/Button/grafiko.png',1)"><img src="pictures/Layout/Button/grafik.png" alt="grafikbutton" width="141" height="50" id="grafik"></a><a href="tr/web/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('web','','pictures/Layout/Button/webo.png',1)"><img src="pictures/Layout/Button/web.png" alt="webbutton" width="101" height="50" id="web"></a><a href="tr/reklam/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('reklam','','pictures/Layout/Button/reklamo.png',1)"><img src="pictures/Layout/Button/reklam.png" alt="reklambutton" width="159" height="50" id="reklam"></a><a href="tr/foto/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('foto','','pictures/Layout/Button/fotoo.png',1)"><img src="pictures/Layout/Button/foto.png" alt="fotobutton" width="108" height="50" id="foto"></a><a href="tr/video/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('video','','pictures/Layout/Button/videoo.png',1)"><img src="pictures/Layout/Button/video.png" width="125" height="50" id="video" alt="videobutton"></a><a href="tr/muzik/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('muzik','','pictures/Layout/Button/muziko.png',1)"><img src="pictures/Layout/Button/muzik.png" alt="muzikbutton" width="200" height="50" id="muzik"></a>
    </div>
  </div>
</div>
<div id="contentbody">
<div id="contentup">
  <div id="contentuplayout"><center>
    <iframe width="950" height="370" src="http://www.youtube.com/embed/E-dw03-s1vA?rel=0" frameborder="0" allowfullscreen></iframe>
  </center>
  </div>
</div>
<div class="contentdevider"></div>
<div id="contentmain">
<div id="mainrow1">
<span class="linkstyle2">    
<div class="smallarticel" >
  <div class="smallarticelpic"><a href="tr/grafik/"><span class="rollover"><img src="pictures/Grafik-Site/kurumsal-kimlik.png" width="270" height="150" alt="ambalaj">       </span></a>
  </div><hr>
  <strong><a href="tr/grafik/">GRAFiK TASARIM</a></strong>
  <hr>
  <p>Profesyonel ve Modern Grafik Tasar&#305;m</p>
  </div>  
  <div class="smallarticel2">
  <div class="smallarticelpic"><a href="tr/web/"><img src="pictures/Grafik-Site/webdesign.jpg" width="270" height="150" alt="ambalaj"></a>
  </div><hr>
  <strong><a href="tr/web/">WEB TASARIM</a></strong>
  <hr>
  <p>Profesyonel ve Modern Webtasar&#305;m
  </p>
</div>    
<div class="smallarticel">
  <div class="smallarticelpic"><a href="tr/foto/"><img src="pictures/fotograf-cekim.jpg" width="270" height="150" alt="ambalaj"></a>
  </div>
  <hr>
  <strong><a href="tr/foto/">FOTO&#286;RAF &Ccedil;EK&#304;M&#304;</a></strong>
  <hr>
  <p>Profesyonel St&uuml;dyo ve Outdoor &Ccedil;ekimleri</p>
</div>
</span>    
</div>
<div id="mainrow2">
<span class="linkstyle2">    
<div class="smallarticel">
  <div class="smallarticelpic"><a href="tr/reklam/"><img src="pictures/Reklam-Site/radio.jpg" width="270" height="150" alt="ambalaj"></a>
  </div><hr>
  <strong><a href="tr/reklam/">REKLAM AJANSI</a></strong>
  <hr>
  <p>Profesyonel Reklam Tasarim ve Jingle</p>
  </div>
  <div class="smallarticel2">
  <div class="smallarticelpic"><a href="tr/video/"><img src="pictures/video-prodüskiyon.jpg" width="270" height="150" alt="ambalaj"></a>
  </div><hr>
  <strong><a href="tr/video/">Video Prod&uuml;ksiyon</a></strong>
  <hr>
  <p>Profesyonel Video Prod&uuml;ksiyon ve Animasyon</p>
  </div>
  <div class="smallarticel">
  <div class="smallarticelpic"><a href="tr/muzik/"><img src="pictures/müzik-prodüksiyon.jpg" width="270" height="150" alt="ambalaj"></a>
  </div><hr>
  <strong><a href="tr/muzik/">M&uuml;zik Prod&uuml;ksiyon</a></strong>
  <hr>
  <p>&nbsp;Profesyonel M&uuml;zik Prod&uuml;ksiyon &nbsp; - Online Mastering ve Mixing -</p>
</div>
</span>
</div>
</div>  
<div class="placeholder"></div>    
</div>   
<div id="footer">
  <div id="footercontent">
    <span class="linkstyle1">
    <a href="tr/hakkimizda/">Hakk&#305;m&#305;zda</a> | <a href="tr/kariyer/">Kariyer</a> | <a href="tr/iletisim/">&#304;leti&#351;im</a> | <a href="tr/gizlilik/">Gizlilik</a></span>
    <div id="copyright">
    Can-Kat &copy; 2012
    </div>    
  </div>    
</div>
</body>
</html>

ET LE STYLE/CSS : Le problème est dans le #contentbody le reste est le reste se centre très bien.

body {
   background-color:#FFF;
   margin-left:0px;
   margin-top:0px;
   margin-right:0px;
   font-family:Verdana, Geneva, sans-serif;
}

#headbackground {
    width:100%;
    min-width:1024px;
    height:300px;
    position:relative;
    float:left;
    background-color:#2E2E2E;

}

#headcontent {
    width:1000px;
    height:180px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    text-align:center;
    background-image:url(../media/Can-Kat%20Productions%20Logo%20-%20wordpress.png);
    background-repeat:no-repeat;
    background-position:center;
}

#language {
    width:40px;
    position:relative;
    float:left;
    margin-left:920px;
    margin-top:35px;
    display:none;
}

#buttons {
    width:1024px;
    height:50px;
    margin-left:auto;
    margin-right:auto;
    color:#FFF;
    position:relative;
    font-size:20px;
}

#navimiddle
{
    width:1024px;
    height:50px;
    position:reltive;
    margin-top:4px;
    float:left;
    background-image:url(../pictures/Layout/Button/leiste.png);
}

#contentbody {
    width:1000px;
    margin-top:-55px;
    margin-left:50%;
    left:-500px;
    float:left;
    position:relative;
    display:block;
}

#contentup {
    width:997px;
    background-image:url(../media/body_top.png);
    background-repeat:no-repeat;
    position:relative;
}

#contentuplayout {
    width:960px;
    margin-left:auto;
    margin-right:auto;
    padding-top:18px;
    position:relative;
}

#contentmain {
    width:902px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-10px;
    position:relative;
}

#mainrow1 {
    width:902px;
    height:305px;
    position:relative;
}

#mainrow2 {
    width:902px;
    height:280px;
    margin-top:5px;
    position:relative;
}

#verticalrowleft {
    width:600px;
    height:auto;
    color:#000;
    position:relative;
    float:left;     
}

#verticalrowright {
    width:295px;
    height:auto;
    position:relative;
    float:right;
    border-left:1px solid #000;
    text-align:center;
}

#footer {
    width:100%;
    min-width:1024px;
    height:100px;
    position:relative;
    background-color:#2E2E2E;
    float:left;
}

#footercontent {
    width:902px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    position:relative;
    color:#FFF;
}

#copyright {
    width:150px;
    float:right;
    position:relative;
}

/* -------- Classes --------- */
.rollover {
    width:270px;
    background-image:url(../pictures/Layout/hover-zoom.png);
    background-repeat:no-repeat;
    background-color:transparent;
    margin:auto;
}

.smallarticel {
    width:280px;
    height:296px;
    background-color:#DDD;
    border:thin #333;
    text-align:center;
    position:relative;
    float:left;
    border-radius:5px;
}

.smallarticel2 {
    width:280px;
    height:296px;
    margin-left:26px;
    margin-right:26px;
    background-color:#DDD;
    border:thin #333;
    text-align:center;
    float:left;
    position:relative;
    border-radius:5px;
}

.smallarticelpic {
    width:270px;
    margin-left:5px;
    margin-top:5px;
    position:relative;
    background-color:#000;
    background-image:url(../pictures/Layout/hover-zoom.png);
}

.contentdevider {
    width:960px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(../pictures/contentdevider.png);
    position:relative;
}

.placeholder { width:100%; height:30px; position:relative; float:left; }

.linkstyle1 A:link    {color:#FFF; text-decoration:none;}
.linkstyle1 A:visited {color:#FFF; text-decoration:none;}
.linkstyle1 A:active  {color:#FFF; text-decoration:none;}
.linkstyle1 A:hover   {
    color: #F0F0F0;
    text-decoration: underline;
}

.linkstyle2 A:link    {color:#000; text-decoration:none;}
.linkstyle2 A:visited {color:#000; text-decoration:none;}
.linkstyle2 A:active  {color:#000; text-decoration:none;}
.linkstyle2 A:hover   {color:#000; text-decoration:underline;}

img
{  border-style: none; }

#language img { border-radius:5px; }

.centertext { text-align:center; }

a.link{
    background:transparent url(a-bg.png) no-repeat -81px bottom;
}

Demandé el 18 de Février, 2013 par canny

Answer 1

2 Réponses

Answer 2

1voto

Michael Points 586

Si vous souhaitez que votre contenu soit centré sur un appareil mobile, vous devrez probablement ajouter un CSS spécifique pour un appareil mobile. Et au lieu de vous fier aux tailles basées sur les pixels, vous devrez utiliser des pourcentages.

Centre Contenu Dispositif mobile

#container {
    width: 100%
}

#content-container {
    width: 80%;
    margin-left: 10%;
    margin-right:10%;
}

Bien sûr, vous pouvez réécrire l'ensemble de votre CSS pour qu'il soit adapté à la taille des écrans. Voici un exemple rapide de la façon de procéder. http://jsfiddle.net/4LSmq/

Comment cibler les écrans mobiles

// target small screens (mobile devices or small desktop windows)
@media only screen and (max-width: 480px) {
  /* CSS goes here */
}

/* high resolution screens */
@media (-webkit-min-device-pixel-ratio: 2),
         (min--moz-device-pixel-ratio: 2),
         (min-resolution: 300dpi) {
  header { background-image: url(header-highres.png); }
}

/* low resolution screens */
@media (-webkit-max-device-pixel-ratio: 1.5),
         (max--moz-device-pixel-ratio: 1.5),
         (max-resolution: 299dpi) {
  header { background-image: url(header-lowres.png); } 
}

Deuxième solution

Essayez de changer

#contentbody {
    width:1000px;
    margin-top:-55px;
    margin-left:50%;
    left:-500px;
    float:left;
    position:relative;
    display:block;
}

à

#contentbody {
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    display:block;
}

L'écran de votre téléphone mobile est inférieur à 1000px. Votre marge définie en pourcentage est donc relative à la largeur de l'écran, qui est inférieure à 1000px dans ce cas. Exemple http://jsfiddle.net/R9rSx/

Il est également judicieux d'ajouter, de modifier la largeur jusqu'à ce que vous obteniez le look souhaité.

<meta name="viewport" content="width=1200">

Répondu el 18 de Février, 2013 par Michael (586 Points )

Answer 3

0voto

Painkiller Points 109

Qu'en est-il de l'utilisation des métabalises ?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

Répondu el 11 de Septembre, 2017 par Painkiller (109 Points )

Le centrage n'est pas possible sur tous les navigateurs mobiles - le navigateur normal fonctionne à merveille

Réponses

Centre Contenu Dispositif mobile

Comment cibler les écrans mobiles

Deuxième solution

Questions en vedette

Top Tags

Prograide.com

Powered by:

Le centrage n'est pas possible sur tous les navigateurs mobiles - le navigateur normal fonctionne à merveille

Réponses

Centre Contenu Dispositif mobile

Comment cibler les écrans mobiles

Deuxième solution

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: