html - 位置 :fixed breaks font-size on mobile

Question

我正在为移动设备开发一个网站。由于分辨率等不同，我们的想法是将字体大小保持在浏览器默认大小 (100%)。此 font-size: 100% 在 #content 中按计划工作(即文本在移动浏览器中可读，而不是很小)。但是，#header 中的文本很小且不可读。为什么不同？是不是因为#header有position:fixed？如果是这样，是否有变通方法或更好的做法来使标题文本与移动设备友好的 #content 大小相同？谢谢。

CSS:

body, html {
   width: 100%;
   height: 100%;
   font-size: 100%;
}
#main {
   width: 100%;
   height: 100%;
   overflow: auto;
   font-size: 100%;
}
#header {
   position: fixed;
   top: 0;
   width: 100%;
   background: black;
   color: white;
   text-align: center;
}
#content {
   width: 100%;
}

HTML:

<div id='main'>
   <div id='header'>header here</div>
   <div id='content'>content here</div>
</div>

Answer 1

好的。因此，为了更好地解释您的问题，这个具体的 stack问题几乎可以为您提供这一切背后的要点。但作为一个更简单的解释，您的手机告诉网络它并非为所有网站和所有功能而设计，但是，使用以下代码:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

此代码将告诉 HTML 它是为与您的网站合并的任何类型的样式而设计的。但是同样，链接到这个答案的堆栈问题是一个更好的引用:)