У меня есть простая страница с навигационной панелью и домашней страницей. Навигационная панель фиксирована, и домашняя страница занимает 100% экрана. Затем зритель прокручивается с главной страницы, чтобы просмотреть остальную часть веб-контента.Ошибка масштабирования шрифта до размера экрана
У меня проблема с шрифтом, который не масштабируется при просмотре на мобильном устройстве или устройствах с меньшим размером экрана. Я считаю, что это связано с тем, что я меняю навигационную панель на ширину 100%, а для домашней страницы - 100%. Текст в разделе 1 масштабируется правильно (шрифт становится больше, когда экран меньше).
Как я могу на домашней странице и навигация увеличить шрифт?
h1{
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
html {
height: 100%;
min-height: 100%;
}
body {
background: #1A3742;
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin: auto 100px;
height: 100%;
}
#header {
background: gray;
padding: 28px 0 26px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
}
#top{
text-align: center;
height: 100%;
}
#home-content{
position: relative;
top: 50%;
transform: translateY(-50%);
}
a[href="#top"] {
margin-left:100px;
margin-right:50px;
vertical-align: middle;
text-decoration: none;
font-weight: bold;
}
a img{
vertical-align:middle;
}
.content {
margin-left:75px;
margin-top:25px;
overflow: hidden;
}
.content p{
margin-top: 0px;
}<!DOCTYPE html>
<html>
<head>
\t <title></title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
\t <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<a href="#top">Name</a>
<a href="">
<img src="" alt="img" height="24" width="24">
</a>
</header>
<div id="top">
<div id = "home-content">
<h1>Top</h1>
<h2>Sub title</h2>
<p>
This text does not scale at all.
</p>
</div>
</div>
<div id="section1">
<h1>Section 1</h1>
<div class = "content">
<p>
This scales with the screen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>Ниже приведен пример на мобильный телефон, который показывает верхний текст не масштабирование, но раздел1 масштабирование правильно. 
Это галактика S5 в Google Chrome. Текст на главной странице/верхней части и на навигационной панели должен масштабироваться аналогично тому, как это делает текст раздела1. Как я могу исправить это, чтобы все масштабировалось до экрана?
Я понимаю, что с помощью по умолчанию, но почему размер шрифта раздела 1 увеличивается, но навигация и верхняя часть не увеличивают размер шрифта? Я ожидаю, что оба они будут иметь одинаковый размер шрифта. – eric
обновите свой браузер после активации режима мобильного веб-инспектора, я увидел то же самое, а затем запомнил обновление. – LordNeo
Я обновился, но это не исправляет. #top имеет высоту 100%, которая изменяет размер текста в нем. Я пытаюсь понять, как я могу заставить его не делать этого, подобно нижней части, которая никогда не меняется. Не уверен, как это сделать простым способом. Если я удалю высоту: 100% в #top, все работает нормально. Тем не менее, мне нужно сохранить высоту: 100% – eric