響應式CSS在手機上具有不同的對象大小

我使用的是Bulma CSS框架，我無法讓我的網站像其主頁一樣快速響應。響應式CSS在手機上具有不同的對象大小

該網站爲live。我的< html>具有相同的字體大小，並且我的dom結構與Bulma的主頁相同。但我的手機看起來很糟糕。

這裏是我的HTML頁面的一個片段：

<html> 
 

 
<body> 
 
    <section class="hero"> 
 
    <div class="hero-body has-text-centered"> 
 
     <div class="container"> 
 
     <div> 
 
      <h1 class="title">Tiny Text!</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body> 
 

 
</html>

<html class="route-index"> 
 

 
    <body class="layout-default" style="zoom: 1;"> 
 
     <section class="hero is-medium"> 
 
     <div class="hero-body has-text-centered"> 
 
      <div class="container"> 
 
      <h1 class="title">Somehow big text?</h1> 
 
      </div> 
 
     </div> 
 
     </section> 
 
    </body> 
 

 
</html>

布爾瑪的頁面：

我的頁面：

您可以通過Chrome的開發者工具測試這個設置視口移動在這兩個網站的主要頁面。

來源

2017-01-28 Scientaster

嘗試添加這個元標記

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

這告訴瀏覽器頁面適合手機屏幕，否則它給你一個「桌面網站」，這是更廣泛的

來源

2017-01-28 19:24:29 Dotan

也做到了！我甚至沒有任何想法可以提供這種功能的元標籤。非常感謝。 – Scientaster

響應式CSS在手機上具有不同的對象大小

回答

相關問題