display:inline 块的字体大小失败

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% 宽度并删除最小宽度，使其适合您的蓝色框。

display:inline 块的字体大小失败

font-size with display:inline-block fails

html

css

mobile

font-size