Почему этот текст выглядит настолько маленьким на моем мобильном устройстве?

Question

На изображении ниже вы можете увидеть, что на this example page from my personal website при просмотре в браузере рабочего стола текст, обозначенный красным полем, отображается с размером, равным тексту сразу слева. Однако на моей Galaxy S5, используя приложение Firefox, текст выглядит необычно мало по сравнению с другим текстом на странице.

Почему мое мобильное устройство отображает этот текст в другом размере, чем мой настольный компьютер?

Это код SASS отношение к тексту вопроса:

.blognav { 
    position: relative; 
    border-bottom: thin solid $base_colour_800; 
    width: 100%; 
    margin: 1em 0 2em 0; 
    padding-bottom:1em; 
    min-height: 3em; 
    overflow:hidden; 
} 

.next a, 
.previous a { 
    position: absolute; 
    width: 50%; // inherits from blognav, not from .next or .previous, so it has to be 50%, not 100% 
    height: 100%; 
    color: $font_colour; 
    text-decoration: none; 
    font-style: bold; 
    box-shadow: none; 
    overflow: hidden; 
} 
.next a { 
    /* Because the anchors are absolute position, and the right nav link is 
    right-aligned, this forces the a to start at the right edge and head toward 
    the right from there, which puts it in the wrong place. This margin setting 
    backs it up so that it's in the right place.'*/ 
    margin-left: -50%; 
} 
.blognav a:hover { 
    color: $base_colour_700; 
    box-shadow: none; 
} 
.blognav p { 
    color:$base_colour_800; 
    margin: 0; 
    padding: 0; 
} 
.next:hover, 
.previous:hover { 
    color: $base_colour_800; 
    text-decoration: underline; 
} 
.next, 
.previous { 
    display: relative; 
    border:transparent thin solid; 
    width:50%; 
} 
.next { 
    float: right; 
} 
.next p { 
    text-align: right; 
} 
.previous { 

} 

Это HTML:

<div class="blognav"><div class="next"><p><a href="Gordon at the Conbini"></a> 
</p> 
<p>Next blog entry <span class="arrow-e"></span></p> 
<p><strong>Gordon at the Conbini</strong></p> 
</div> 
<div class="previous"><p><a href="Why Self Publish"></a> 
</p> 
<p><span class="arrow-w"></span> Previous blog entry</p> 
<p><strong>Why Self Publish</strong></p> 
</div> 
</div> 

Answer 1

Попробуйте это:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Вы необходимо использовать это потому, что не каждый пиксель такого же (как вы можете прочитать в ссылке), и это meta тега исправить эту проблему

И here ссылка, которая объясняет, как это работает