为什么我的移动设备上的文字显得如此之小？

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是解释其工作原理的链接