Решение несоответствий шрифта между мобильными браузерами ⇐ CSS

[Anonymous]

Я работаю над небольшим веб -сайтом в качестве личного проекта, и я немного озадачен разницей между появлением сайта на Firefox Mobile и Chrome Mobile. Нормализовать.css, но я не думаю, что на самом деле он что -то делает.
Я явно устанавливаю размер шрифта для каждого текстового элемента, поэтому очень странно, что он так сильно меняется между браузерами.
Сайт можно найти здесь. Используйте @Media (Ориентация: ландшафт), чтобы установить разные свойства в случае, если пользователь использует сайт в ландшафте или портрете < /p>

Код: Выделить всё

.p {
font-family: "Lucida Console", "Courier New", monospace;
margin-right:  11vw;
margin-left:  11vw;
font-size:    3vw;
}
.storylink{
position: absolute;
bottom: 0;
color: yellow;
font-size:    3vw;
}
.instructionp{
color:grey;
font-size:2vw;
}
.linkcounter{
position: absolute;
left:0;
top:0;
color:grey;
font-size:3vw;
}
@media (orientation: landscape) {
.p {
font-family: "Lucida Console", "Courier New", monospace;
margin-right:  20vw;
margin-left:  20vw;
font-size:  2vw;
}
.storylink{
position: absolute;
bottom: 0;
color: yellow;
font-size: 1.5vw;
}
.instructionp{
color:grey;
font-size:1vw;
}
.linkcounter{
position: absolute;
left:0;
top:0;
color:grey;
font-size:1vw;
}
}

Appearance on Firefox mobile
Appearance on Chrome mobile







Подробнее здесь: https://stackoverflow.com/questions/796 ... e-browsers