移动设备易用性:可点击元素之间的距离太近;文字太小,无法阅读;未设置视口值

网站搭建好后从谷歌站长管理后台可以得知整个网站的健康状况,例如: 在移动设备易用性选项可以看到系统检测出来的报告为(可点击元素之间的距离太近;文字太小,无法阅读;未设置视口值。)

什么是“文字太小,无法阅读 ”?

根据谷歌站长后台官方说明文档可以得知 “ 文字太小,无法阅读 ” 指的是:“ 移动设备用户需要“张合双指进行缩放,才能阅读这些网页上的内容 ” 。要修正此类错误,请在为网页指定视口后,将字体大小设为可在视口内适当地进行缩放 ”。

什么是 “未设置视口值 ” ?

根据谷歌站长后台官方说明文档可以得知 “未设置视口值” 指的是:“ 您的网页未定义 viewport 属性(该属性用于指示浏览器如何根据屏幕尺寸来调整网页大小及缩放网页)。由于网站访问者使用的设备各异且屏幕大小也各不相同(从大型的桌面设备显示器到平板电脑和小型智能手机),因此您应使用标记 meta viewport 为网页指定视口 ” 。

未设置视口值的解决办法:

进入WordPress网站的站长后台在左边点开 “外观” 并在右边找到 “主题页眉(header.php)” 模版,并在该模版底下粘贴下方这个代码。

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

为了方便代码的管理和记住,当在插入代码时可在代码前后分别留三行的空格,插入好代码点底部 “更新文件” 如下图

代码解释:

使用元视口值 width=device-width 指示网页与屏幕宽度为单位进行匹配。这样一来,网页便可以重排内容,使之适合不同的屏幕大小(从较小的手机到较大的桌面设备显示器,不一而足。)

添加属性 initial-scale=1 会指示浏览器在不考虑设备方向的情况下,指示浏览器将 CSS 像素与设备无关像素的比例设为 1:1,并允许网页完全占用横向宽度。

添加完成之后点开谷歌站长管理后台再进行测试一下就会发现 “移动设备易用性” 的视口值和字体大小已经通过了测试,如下图

这时打开手机进行网页浏览发现网页变宽了;但是 “ 可点击元素之间的距离太近” 并没有解决,文章后面会在此处更新。

总结:利用谷歌网站站长管理工具进行网站的优化可大大提高搜索引擎的收录。

将文章分享到以下平台:

广告

关于爱上 油管

翻墙上GOOGLE学习国外尖端技术知识,享受国际互联网自由的快乐与财富和便利。
此条目发表在YOUTUBE分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注