視口在移動設備上的錯誤和不需要的縮放比例

我在一個項目的codepen上編碼了兩個'單頁網站'（第二個未完成，導航需要多一點代碼才能正確顯示）。視口在移動設備上的錯誤和不需要的縮放比例

看看我的代碼沒有太大的區別，所以我不明白爲什麼第二頁在移動設備上看起來很垃圾？我可以從左到右滾動，看不到整個頁面的大小，並且不會縮小到足夠大的範圍。

（注：我用引導這些）

body { 
 
    font-family: Raleway; 
 
    background-image: no-repeat center center fixed; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-color: #92b8db; 
 
    color: white; 
 
    display: block; 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    font-size: 70px; 
 
    margin: 2% 0 3.5% 0; 
 
    text-transform: uppercase; 
 
} 
 

 
nav { 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 25px; 
 
    float: none; 
 
    overflow: none; 
 
} 
 

 
li, 
 
ul { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    margin: 5px 20px; 
 
} 
 

 
h2 { 
 
    margin: 25px 0 0 20%; 
 
} 
 

 
p { 
 
    font-size: 20px; 
 
    margin: 5px 10% 20px 10%; 
 
    text-align: justify; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" , user-scalable=no> 
 

 

 
<body background="http://static.tumblr.com/38d4fa35aa182890b82bb598a50c8d8b/hti7sqq/7h2orgi26/tumblr_static_4g8ybvq3e4ys8sk4sgowscko8.jpg"> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 

 
     <div class="col"> 
 
     <h2>Heartcube</h2> 
 
     </div> 
 

 
     <div class="col"> 
 
     </div> 
 

 
     <div class="col"> 
 

 
     <nav> 
 
      <ul> 
 
      <li>About</li> 
 
      <li>Portfolio</li> 
 
      <li>Contact</li> 
 
      </ul> 
 
     </nav> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="container-fluid container"> 
 
     <h1> Betti Bremm</h1> 
 
     <p> 
 
     We are giants... 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-07-01 heartcube

編輯我的答案 –

的原因，你不能「放大」，是因爲你將用戶可擴展設置爲「否「 - 如果你刪除那部分你應該能夠。

如果你只是離開了視在元

meta name="viewport" content="width=device-width, initial-scale=1">

這應該足夠了。

用戶可伸縮元僅在網站上的HTML設置中設置，該設置在您的codepen中不起作用（它似乎沒有考慮到codepen中的手動頭元設置）。你的引導程序也包含在這個codepen兩次。

希望這有助於

來源

2017-07-02 00:30:49

視口在移動設備上的錯誤和不需要的縮放比例

回答

相關問題