У меня есть две почти идентичные веб-страницы.Фактически, я скопировал код для первого и сохранил его как 2-й, прежде чем просто изменить некоторые элементы во 2-м.Стили в теге style остались точно такими же.Они отображают шрифты разных размеров, и я не имею ни малейшего представления, почему.
Не отвлекаясь на касательные о том, что я должен делать (например, используя таблицу стилей) или придираясь к моему коду (если он не отвечаетвопрос), Может кто-нибудь объяснить, почему я получаю два разных стиля, используя идентичные теги стилей?
PS - Я знаю, что могу поиграть и заставить их обоих иметь одинаковый стиль,но это сводит меня с ума, не зная, почему это происходит.Поверьте мне, я бы уже выглядел так же, если бы не мое навязчивое желание понять вещи, которые я не понимаю.
PSS - Добавление мета-тега для области просмотра, как предложено в ответе на этот вопрос , не сработало для меня.
--- ДЕТАЛИ---
options.php , требуемый стиль, выглядит так в мобильном Chrome на телефоне LG ... нижеприведенные снимки экрана сделаны из 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, вот вычисленный шрифт-sizes:
_______________________________
|______| 1st pg. | 2nd pg. |
|______|___________|___________|
| h1 | 40.133px | 32px |
|______|___________|___________|
| h2 | 36.133px | 24px |
|______|___________|___________|
| a | 38.133px | 28px |
|______|___________|___________|
ОБНОВЛЕНИЕ # 2 - Как предположил Деян, я попытался просмотреть два сайта в режиме рабочего стола, и они одинаковы, даже если они не совпадают, когдапросмотр на мобильном телефоне.
ОБНОВЛЕНИЕ # 3 - После некоторой обработки я получил две страницы, которые имели одинаковый стиль при просмотре на мобильном телефоне.Конечно, я никогда не сомневался, что сделаю это, и это все еще не отвечает на мой первоначальный вопрос относительно исходного кода, но на самом деле это могло бы помочь мне сузить его до весьма специфического виновника.Вот что я сделал.Я полностью удалил font-size из body.Затем я изменил h1 и h2 на div с.Я отредактировал тег style, чтобы отразить эти новые div s.Затем я установил font-size: 5vw для #heading div (старый h1).Я установил font-size: 3.022727vw (подробнее об этом позже - 3.022727) для #subheading div (старый h2).Я установил font-size: 3.5vw для элементов a. Здесь снова становится странно: Если я изменю значение 3.022727vw на 3.022726vw в обоих тегах стиля, 1-я страница практически не изменится (что и следует ожидать), но 2-я страница делает это (обратите внимание, как #subheading изменяет также размер шрифта тегов a):
admin.php - #subheading { font-size: 3.022727vw; } 
admin.php - #subheading { font-size: 3.022726vw; } 