android - 手机上的文本缩放

Question

我正在构建我网站的移动版本，它非常完美，只是“关于我们”页面上的电子邮件链接大小不合适。我将所有文本设置为 14pt，但链接中的文本看起来更像是 4pt。不过我注意到的另一件事是，如果我将平板电脑调到横向，字体会变大，但仍然没有达到应有的大小。这也只发生在 Chrome 中。这些链接在股票浏览器中看起来不错。我已经尝试了几乎所有我能想到的方法来修复它，但还没有任何改变。有谁知道如何解决这个问题？

如果你需要的话，这是我的 CSS:

.email {
    display: inline-block;
    background-color: #555;
    border-left: 10px solid #1e9cd7;
    padding: 2px 10px;
    margin-top: 10px;
    margin-bottom: 2%;
    font-size: 14pt;
    color: #e7e7e7;

    -ms-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
}

.email:hover {
    background-color: #1e9cd7;
    border-left: 10px solid #e7e7e7;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.7);
    color: #e7e7e7;
}

Answer 1

移动浏览器很可能只是以您不希望的方式缩放内容。 CSS 非常具体。如果您没有将字体大小设置为在特定断点处随 @media 规则而变化，它只会是 14pt，并且您的浏览器只是默认放大或缩小并使它们看起来更小。但除非另有声明，否则它们是 14pt。

查看此资源:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag