0
私はnavbarとホームページを持つ単純なページを持っています。 navbarは固定され、ホームページは画面の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が正しくスケーリングモバイル上の例です。 
google ChromeのGalaxy S5です。ホームページ/上部とナビゲーションバーのテキストは、セクション1のテキストと同様にスケーリングする必要があります。 すべてをスクリーンに合わせて調整するにはどうすればよいですか？
を照会し、私はそれがデフォルトを使用していることを理解しますが、なぜセクション1のフォントサイズは増加しますか？しかし、ナビゲーションバーと上部の部分はフォントサイズが増加しませんか？私は両方のフォントサイズが同じであることを期待します。 – eric
Webインスペクタのモバイルモードを有効にした後でブラウザを更新すると、同じことがわかり、更新のために記憶されます。 – LordNeo
私はリフレッシュしましたが、修正されません。 #topの高さは100％で、テキストのサイズが変わります。私はそれをやらないようにする方法を見つけようとしています。決して変わらない底部の部分に似ています。これを簡単な方法で行う方法がわかりません。 #topで100％の高さを削除すると、すべて正常に動作します。しかし、私は高さを維持する必要があります： – eric