响应式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在手机上具有不同的对象大小

回答

相关问题