Google Search Console移动设备易用性问题未设置视口值、可点击元素之间的距离太近、文字太小无法阅读、内容宽度超过了屏幕显示范围问题修复
在Google Search Console中有一个专门对网站移动端网页易用性的检测和评价，主要包含以下四个指标：可点击元素之间距离太近、文字太小，无法阅读、内容宽度超过了屏幕显示范围、未设置视口值。如果你的网站在移动端被检测出关于这四项指标的大量问题，Google认为你的网站不适合在移动端进行浏览，就会在移动搜索对你的网站进行降权，降低网站移动端的流量。所以只要出现了这思想问题，最好还是尽可能的修改，提高Google移动端搜索自然流量。
1 未设置视口值
是没有在出问题的网页的head标签中设置meta name="viewport"，在网页的<head></head>之间加上
<meta name="viewport" content="width=device-width, initial-scale=1">
即可解决问题。
2 文字太小，无法阅读
- 确认网站head中有viewport标签，如果没有则加入viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
- 确认移动端网页各个元素的字体最好大于12px，不仅仅是p，也包含a等其他有文字显示的元素
-
尽量用em rem等字体单位，不建议用px
3 可点击元素之间的距离太近
因为移动端整个屏幕较小，如果网页上按钮或者链接挨得比较近，就会误触到相邻的按钮或者链接。这个问题可以通过以下手段解决
- 增加按钮或者链接的margin属性，让按钮或者链接隔得更远，防止触碰
4 内容宽度超过了屏幕显示范围
我的网站上出现这个问题，我仔细看了下出问题的网页，主要有以下两个原因导致了这个问题：
- 使用了Katex显示了比较长的数学公式，导致数学公式显示超过了屏幕显示范围，具体的修复方案可以见我这篇文章：CSS – 使用Katex渲染数学公式，数学公式过长超出页面范围的问题修正 。
- 就是插入代码，一行代码长度比较长，需要滑动才能看的完全，这个目前还没有想到办法修复。
参考
欢迎扫码关注我的微信公众号，及时获取文章更新
本文作者：StubbornHuang
版权声明：本文为站长原创文章，如果转载请注明原文链接！
原文标题：Google Search Console移动设备易用性问题未设置视口值、可点击元素之间的距离太近、文字太小无法阅读、内容宽度超过了屏幕显示范围问题修复
原文链接：https://www.stubbornhuang.com/2786/
发布于：2023年09月05日 11:19:21
修改于：2023年09月05日 11:23:04
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论
72