我有一个CSS字体大小的问题，我不能弄清楚。
问题：
带页脚的简单网站。页脚由两列组成，每列都有一些链接。列基于显示：内联块。
字体大小是以rem为单位设置的，在桌面上运行良好。但在移动的上，即Android Chrome上，字体大小无法缩放：文本变得不可读，而P标签中的其它文本IE如所期望的是可读的。
如果我从footer-nav-column中删除display:inline-block，文本将按预期进行缩放，但会丢失列布局。
我也尝试了浮动列，但文本也缩放到微小的象形文字。
这是怎么回事？

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;
}

<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>