html - 显示 :inline-block fails 的字体大小

Question

我有一个 css 字体大小的问题，我无法弄清楚。

问题:

带有页脚的简单网站。页脚由两列组成，每列都有一些链接。这些列基于 display:inline-block。

字体大小在 rem 中设置并且在桌面上工作正常。但在移动设备上，即 Android Chrome，字体大小不会缩放:文本变得很小，难以阅读，而其他文本，即 p-tags 中的其他文本，如预期的那样可读。

如果我从 footer-nav-column 中删除 Display:inline-block，文本会按预期缩放，但会丢失列布局。

我也为列尝试了 float ，但文本也会缩放为微小的象形文字。

这是怎么回事？请帮忙;-)

HTML:

<footer class="footer-nav">
<div class="layout-center">
    <ul class="footer-nav-column">
        <li><a href="/Contact">Contact</a></li>
    </ul>
    <ul class="footer-nav-column">
        <li><a href="/Legal">Legal</a></li>
        <li><a href="/Privacy">Privacy</a></li>
        <li><a href="/Cookies">Cookies</a></li>
    </ul>
</div>
</footer>

CSS:

    footer
{
    padding: 1rem 0;
    display: block;
}


.footer-nav
{
    padding: 2rem 0;
    background-color: #069;
}

.footer-nav-column
{
    vertical-align: top;
    display: inline-block;
    margin-right: 5rem;
}

.footer-nav-column > li
{ 
    font-size: .9rem;
    padding: .5rem 0;
}

.footer-nav-column > li > a
{
    color: #efefef !important;
}

.footer-nav-column > li > a:hover 
{ 
    text-decoration: underline;
}

桌面:

http://imgur.com/51WFQsk,vucViOd#0

手机:

http://imgur.com/51WFQsk,vucViOd#1

谢谢你，你真棒!

编辑:

这是完整的网站:nukura.com

Answer 1

我注意到您在代码中经常使用 text-size-adjust。如何将 html 标签的字体大小设置为 100%(大约 16px)并相应地调整所有 rem 测量值？此外，使用此标记可能会有所帮助:

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

将它放在您的 head 标签中，看看它是否有帮助。我知道我在过去的元素中遇到过字体大小问题和缩放问题，例如您的问题，但视口(viewport)元标记和设置 html 字体大小帮助我解决了问题。

此外，尝试将 div.layout-center 设置为 100% 宽度并移除最小宽度，使其适合您的蓝色框。