markdown书写错误导致的网页手机版页面不友好的问题解决

今天发现某些网页对手机屏幕的支持不是很好,根据提示进行了修改,本文对此就行记录。

Mobile-Friendly Issues

search console中显示主要有三类错误:

  • Text too small to read
  • Content wider than screen
  • Clickable elements too close together

因为使用的是Pelican制作的静态网页,网页内容都是先通过Markdown书写,然后再转换成html。开始,以为是使用的模版对手机屏幕的支持有问题。查看报告后,发现是自己的书写问题。

使用单引号生成段落内代码

文章内容中代码的部分使用了 “`” 和 “```” 两种标记法,前者主要使用在嵌入在文本中较短的代码,后者主要用于新起的代码段落。在书写的时候,嵌入文本中的代码长度过长,而 “`” 部分生成的代码不会压缩和换行,导致在手机屏幕显示下使得页面的宽度没有适配屏幕宽度,从而被系统判定适配手机存在问题。于是,把一些内容稍长的单引号引用的内容换成后一种书写就可以了。

超链接文本过长

还有一种错误原因就是,超链接的名字使用了链接本身,这样当链接很长的时候,导致链接文本很长,并在手机屏幕下导致文本内容超出了屏幕宽度。

另外,触摸的元素靠的太近这个错误,我并没有单独进行处理。当以上两个写法改正后,提交 “Fix Validation” 通过后,该错误也被 fix 掉了。

资源

Google 提供的页面检查工具:
Mobile-Friendly Test
该工具可以实时检查当前页面存在的issue,并有针对性地给出意见。