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

移动设备上的文字缩放

1 个答案: