2016-04-07 13 views
2

Artık bootstrap/html/css uzmanı değilim ve son zamanlarda bazı şablonlar/kodlarla uğraşmaya başladım ve kardeşim için bir web sitesi yapmaya başladım.Bootstrap bazı aygıtlarda çakışma/örtüşüyor

Sonuçlardan oldukça memnunum, ilk zamanlayıcı ve 4 gün sonra istediğimi elde ettiğimi söyleyebilirim. Ancak, mobil sürüm her tarayıcıda/çözünürlükte düzgün çalışmıyor gibi görünüyor. Neyi yanlış yaptığımı bilmiyorum. Chrome'daki Xperia ZL'yi denedim ve her şey yolunda görünüyor. IPhone'da olsa da, bu http://i.imgur.com/ZTWyxX0.png gibi görünüyor. (web sitesi: http://www.maconneriesdi.com)

Gördüğünüz gibi, "hakkında" bölümü iPhone'daki "iş" bölümü ile çakışıyor (neredeyse 720p). Xperia S (720p) denedim ve aynı problemi yaşadım. Farklı tarayıcılarla denendi. IPad ve Xperia ZL'de (1080p) web sitesi iyi görünüyordu. Bilgisayarımdaki pencereyi en az 1400x900 boyutunda yeniden boyutlandırdığımda, test ettiğim her tarayıcıda da bu sorunla karşılaşmam. Ayrıca, web sitesinde kullandığım yazı tipleri mobil cihazlarda çalışmaz. Burada

kodum

<head> 
    <title>Maçonnerie SDI</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/grayscale.css"> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&subset=cyrillic,cyrillic-ext,latin,greek-ext,greek,latin-ext,vietnamese' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'> 

</head> 

Ve burada bölüm

<!--ABOUT SECTION--> 
<div class="row"> 
<section id="about" class="container content-section text-center"> 
    <div class="row"> 
     <h1 class="col-xs-8 col-xs-offset-2 text-uppercase"><strong>À propos de nous</strong></h1> 
     <div class="row"> 
      <p class="col-xs-8 col-xs-offset-2 lead">Dans une industrie de plus en plus compétitive telle que la maçonnerie, rares sont ceux qui se démarquent.</p> 
     </div> 
     <div class="row"> 
      <p class="col-xs-8 col-xs-offset-2 lead">Constamment à la recherche de la perfection en matière de rapidité, d'efficacité et d'exactitude, Maçonnerie SDI allie expérience et énergie pour mener à terme tous ses projets indépendamment de ses envergures.</p> 
     </div> 
     <div class="row"> 
      <p class="col-xs-8 col-xs-offset-2 lead">Forte de son ambition et de sa volonté, elle s'impose déjà comme un des leaders de sa catégorie en maçonnerie au Québec.</p> 
     </div> 
    </div> 
</section> 
</div> 

<!--WORK SECTION--> 
<div id="work" class="row"> 
    <div class="jumbotron"> 
     <div class="container"> 
      <h2 class="text-uppercase text-center">Réalisations</h2> 
      <button type="button" class="btn btn-sm center-block" data-toggle="collapse" data-target="#gallery">Voir projets</button> 
     </div><!--div container--> 
    </div><!--div collape--> 
</div> 

CSS "hakkında" gider: Yanlış

body { 
    width: 100%; 
    height: 100%; 
    font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    color: #000; 
    background-color: #fff; 
} 

html { 
    width: 100%; 
    height: 100%; 
} 

yapıyorum?

cevap

0

about Kimlik numaranızı 400 piksele kodladıysanız. Bu daha büyük ekranlarda iyidir, ancak metin daha küçük ekranlarda sarıldığında, boyutu daha da büyütür. Canlı site bağlantınızı duyarlı tasarım modu altında iPhone 4S'de (gerçekten küçük bir aygıt) test ettiğimde, #about yüksekliğini 550px olarak değiştirmeyi deneyin.

Yeni kod Ayrıca genel bir kural olarak HTML belgesindeki stil kuralları olması kötü bir fikirdir

#about {padding-top:100px;height:550px;color: #000; background-color: #fff;} 

gibi görünmelidir. Sadece dağınık hale gelir ve bu kuralları başka bir yerde tekrar kullanamazsınız demektir. Her zaman bir css dosyası oluşturun ve tüm stil kurallarını orada saklayın ve ardından bu dosyayı başlıkta arayın.

DÜZENLEME: H. Allen tamamen yükseklik parametreleri kaldırarak anlaşılacağı gibi

Daha iyi bir çözüm olduğunu ancak bunları tutmak istiyorsanız bu vermeniz gereken bir değişikliktir.

-1

Bootstrap ile bir web sitesi oluştururken aynı sorunu yaşadım. CSS'nizdeki yükseklik özelliklerini kaldırmayı deneyin. Div'ler Bootstrap ile duyarlı bir şekilde yeniden boyutlandırıldığı için, belirli yükseklikler ayarlandığında bunu sevmez.

Bu yardımcı olur umarız!

0

Yükseklik özelliklerinden kurtulun. Bootstrap senin için halleder.

0

Çok teşekkürler çocuklar! Hakkımda yanlış bir şeyi kodladığımı düşünüyordum! Bunun olabileceğini hiç düşünmemiştim! Teşekkürler!