【发布时间】：2019-09-05 02:36:48
【问题描述】：
我有两个几乎相同的网页。实际上，我复制了第一个的代码并将其保存为第二个，然后才修改了第二个中的一些元素。样式标签中的样式完全一样。他们显示不同的字体大小，我不知道为什么。
如果我不关心我应该做什么（例如使用样式表）或挑剔我的代码（除非它实际上回答了问题），有人可以解释为什么我使用相同的方式得到两种不同的样式样式标签？
附： - 我知道我可以摆弄并让他们都拥有相同的风格，但这让我发疯，不知道为什么会这样。相信我，如果不是因为我对理解我不理解的事物的痴迷渴望，我现在已经让它们看起来一样了。
附言- 按照this question 的回答中的建议，为视口添加元标记对我不起作用。
---详情---
options.php，所需的样式，在 LG 手机上的移动 Chrome 中看起来像这样...下面的屏幕截图来自 Opera (Chrome) DevTools，其中设备工具栏在 Galaxy S5 上处于打开状态效仿。 （这些截图正是我在我的真实设备 LG 手机上看到的）：
admin.php，具有明显更小的字体大小。在这些屏幕截图中很难看到，但顶部的 img 保持完全相同的大小。另外，请注意两个屏幕截图的宽度相同：
options.php 的代码（php 渲染它）：
$admin_str = "<div class=\"a-div\"><a href=\"admin.php\">Admin Options</a></div>";
$body = "
<div id=\"hero-img\">
<img src=\"imgs/logo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">What would you like to do next?</h2>
<div class=\"a-div\"><a href=\"abcde.php\">Record------</a></div>
<div class=\"a-div\"><a href=\"fghij.php\">Manage -----</a></div>
<div class=\"a-div\"><a href=\"manage.php\">Manage my account information</a></div>
<div class=\"a-div\"><a href=\"klmnop.php\">Add a ----</a></div>
$admin_str
<div class=\"a-div\"><a href=\"logout.php\">Log out</a></div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>------- Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
admin.php 的代码（php 也渲染它）：
$body = "
<div id=\"hero-img\">
<img src=\"imgs/dtlogo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">Administrative Options</h2>
<div class=\"a-div\"><a href=\"appremails.php\">Add a new approved email</a></div>
<div class=\"a-div\"><a href=\"options.php\">Back to main options</a></div>
<div class=\"a-div\"><a href=\"logout.php\">Log out</a></div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>Administrative Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
UPDATE -- 根据 Donkey Shame 的要求，这里是计算出来的字体大小：
_______________________________
|______| 1st pg. | 2nd pg. |
|______|___________|___________|
| h1 | 40.133px | 32px |
|______|___________|___________|
| h2 | 36.133px | 24px |
|______|___________|___________|
| a | 38.133px | 28px |
|______|___________|___________|
更新 #2 -- 正如 Dejan 建议的那样，我尝试在桌面模式下查看这两个网站，即使在移动设备上查看时它们并不相同，它们也是相同的。
更新#3 --经过一些修改，我让两个页面在移动设备上查看时具有相同的样式。当然，我从不怀疑我会这样做，它仍然没有回答我关于原始代码的原始问题，但它实际上可能帮助我将其缩小到一个非常具体的罪魁祸首。这就是我所做的。我从body 中完全删除了font-size。然后我将h1 和h2 都更改为divs。我编辑了样式标签以反映那些新的divs。然后我将font-size: 5vw 设置为#heading div（旧的h1）。我为#subheading div（旧的h2）设置了font-size: 3.022727vw（稍后会详细介绍3.022727）。我为a 元素设置了font-size: 3.5vw。 这又是奇怪的地方：如果我在两个样式标签中将 3.022727vw 更改为 3.022726vw，则第一页几乎没有变化（这是应该预期的），但第二页会这样做（注意#subheading 如何改变a 标签的字体大小）：
【问题讨论】：
-
$admin_str包含什么？ -
@kerbholz 我刚刚用您要求的信息编辑了问题
-
在 chrome、safari（如果可用）、opera 和 firefox 中尝试时，桌面视图中的尺寸如何？
-
真是令人头疼。您能否在开发工具中查看计算得出的字体大小样式并报告两个页面之间的差异（如果有）？
-
我要补充一点，我刚刚从这两个页面复制了样式标签，并编写了一个快速的 php 程序来测试相等性，它们完全相同 (===) 相等。仅供参考。