在Google Search Console中有一个专门对网站移动端网页易用性的检测和评价，主要包含以下四个指标：可点击元素之间距离太近、文字太小，无法阅读、内容宽度超过了屏幕显示范围、未设置视口值。如果你的网站在移动端被检测出关于这四项指标的大量问题，Google认为你的网站不适合在移动端进行浏览，就会在移动搜索对你的网站进行降权，降低网站移动端的流量。所以只要出现了这思想问题，最好还是尽可能的修改，提高Google移动端搜索自然流量。

Google Search Console移动设备易用性问题未设置视口值、可点击元素之间的距离太近、文字太小无法阅读、内容宽度超过了屏幕显示范围问题修复-StubbornHuang Blog

1 未设置视口值

是没有在出问题的网页的head标签中设置meta name="viewport"，在网页的<head></head>之间加上

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

即可解决问题。

2 文字太小，无法阅读

  1. 确认网站head中有viewport标签，如果没有则加入viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. 确认移动端网页各个元素的字体最好大于12px，不仅仅是p，也包含a等其他有文字显示的元素

  2. 尽量用em rem等字体单位，不建议用px

3 可点击元素之间的距离太近

因为移动端整个屏幕较小，如果网页上按钮或者链接挨得比较近，就会误触到相邻的按钮或者链接。这个问题可以通过以下手段解决

  1. 增加按钮或者链接的margin属性，让按钮或者链接隔得更远，防止触碰

4 内容宽度超过了屏幕显示范围

我的网站上出现这个问题，我仔细看了下出问题的网页，主要有以下两个原因导致了这个问题：

  1. 使用了Katex显示了比较长的数学公式，导致数学公式显示超过了屏幕显示范围，具体的修复方案可以见我这篇文章：CSS – 使用Katex渲染数学公式，数学公式过长超出页面范围的问题修正 。
  2. 就是插入代码，一行代码长度比较长，需要滑动才能看的完全，这个目前还没有想到办法修复。

参考