谷歌手机友好失败

Question

This website对Google的移动友好测试失败，说内容太长等等。似乎忽略了视口。

我错过了一些完全明显的东西吗？它在移动设备上渲染很好。

Answer 1

您的网站无法进行两项适合移动设备的测试

• 内容比屏幕宽
• 太靠近的可点击元素

第一个可以使用以下元标记解决：

<meta name="viewport" content="width=device-width">

编辑：但正如您所提到的，此元标记存在于您的网页中。然后，这意味着在某些视口大小，您有内容触发一个非预期的水平滚动。尝试以841-855像素宽的速度浏览您的网站。这可能是警告源于此的地方。

另一个是你的链接太小而无法按下手指，这对移动设备用户来说是一种糟糕的用户体验。

来自Google PageSpeed Insights reference guide：

  

使重要的水龙头目标足够大，易于按

     

这适用于您的用户最常使用的点击目标，例如   用于常用操作，搜索栏和其他重要操作的按钮   表单字段和主要导航链接。这些水龙头目标应该   至少7毫米（如果您配置了视口，则为48个CSS像素）   如果是的话，应该有额外的间距   任何小于7毫米。

只需确保您的重要链接至少包含14px的字体大小和足够的间距，以限制用户意外点击错误链接的可能性。