Отзывчивый CSS имеет разные размеры rem на мобильном телефоне

Я использую CSS Framework Bulma, и я просто не могу заставить мой сайт быть столь же отзывчивым, как и их домашняя страница.Отзывчивый CSS имеет разные размеры rem на мобильном телефоне

Сайт 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>

страница Бульма по:

Моя страница:

Вы можете проверить это с помощью инструментов разработчика на хроме установка окна просмотра на мобильный телефон на главных страницах обоих сайтов.

источник

2017-01-28 Scientaster

попробуйте добавить этот мета тег

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

Это говорит браузеру, чтобы соответствовать страницы на экране мобильного телефона, в противном случае это дает вам «настольное сайт», который шире

источник

2017-01-28 19:24:29 Dotan

Это сделал это! Я даже не подозревал, что существуют метатеги, которые могут предложить такую функциональность. Спасибо. – Scientaster

Отзывчивый CSS имеет разные размеры rem на мобильном телефоне

ответ

Смежные вопросы