今天发现某些网页对手机屏幕的支持不是很好，根据提示进行了修改，本文对此就行记录。
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，并有针对性地给出意见。
Comments