带显示的字体大小：内联块失败

Question

我无法弄清楚 css 字体大小的问题。

问题：

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

字体大小以 rem 为单位设置，在桌面上可以正常工作。但在移动设备（即 Android Chrome）上，字体大小无法缩放：文本变得难以阅读，而其他文本（即 p-tags 中的文本）可以按预期阅读。

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

我也尝试过浮动列，但文本也可以缩放为微小的象形文字。

这里有什么问题？请帮助;-)

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%（大约为 16 像素）并相应地缩放所有 rem 测量值？此外，使用此标签可能会有所帮助：

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

把它放在你的 head 标签中，看看它是否有帮助。我知道我在过去的项目中遇到了字体大小问题和缩放问题，例如您的问题，但是视口元标记和设置 html 字体大小帮助了我。

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