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

Question

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

问题：

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

字体大小以 rem 为单位设置，在桌面上运行良好。但是在移动设备上，即 Android Chrome，字体大小不会缩放：文本变得不可读，而 p-tags 中的其他文本如预期的那样可读。

如果我从页脚导航列中删除 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">

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

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