可点击元素之间的距离太近

> 谷歌网页收录一些常见问题收录和测试工具。

随着移动网站的流量日益增大，拥有适合移动设备的网站是提升网站影响力的重要因素，谷歌等搜索引擎也大力加强移动端的搜索体验，不过，很多桌面版网站在移动设备上可能不太容易浏览及使用。因此，拥有适合移动设备的网站是提升在线影响力的重要因素。为了方便网站站长对于原有桌面网站在移动设备上的优化，谷歌推出了“移动设备易用性”工具来帮助站长优化网站。

* [Google Search Cnosle](https://search.google.com/search-console)
* [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
* [Mobile Web Test](https://search.google.com/test/mobile-friendly)

## 工具优化指南

移动设备适合性测试工具能检测出下列可用性错误，我们可以针对对应错误进行一一修改，具体的优化修改方法如下：

### **1、使用了不兼容的插件**

页面使用了Flash等插件，将Flash删除，或者使用HTML5来替代即可。

### **2、未设置视口**

网页未定义[viewp](https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag)t属性，只需要在网页头部增加如下一行即可。

```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
```

```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
```

### **3、文字太小，无法阅读**

网页字体过小而，移动设备用户需要“张合双指进行缩放”，然后才能阅读这些网页上的内容。这实际上和上一个是同一个问题，网页只要定义了viewpt属性，这个问题即可解决。

### **4、内容宽度超过了屏幕显示范围**

网页需要横向滚动屏幕才能查看其中的文字和图片，这说明页面中某些元素的CSS样式使用了宽度的绝对值，例如图片、表格使用的980px宽度等，这种问题的修改方法是，在css中使用响应式设计方法，当浏览器宽度介于0像素和640像素之间时，使用适合移动设备的css，将宽度设置为相对值，或者将部分元素隐藏。示例代码如下：

```
@media screen and (max-width:640px) {
#divMain {
width:100%;
}
#divSidebar {
display:none;
}
}
```

### **5、可点击元素之间的距离太近**

网页上的元素（如按钮和导航链接间距过小，导致移动设备用户在用手指点按所需元素时通常会按到相邻的元素。这个问题也可以使用响应式设计方法，在移动设备上增加行高即可，示例代码如下：

```
@media screen and (max-width:640px) {
p {
line-height:150%;
}
}
```

解决了这些问题之后，点击“验证修复”，即可让搜索引擎重新验证网站页面，对影响网站的移动设备易用性问题加以修复。

侵删转自：[陌小九博客](https://www.moxiaojiu.com/1297.html)

最后修改：2024 年 10 月 07 日

如果觉得我的文章对你有用，请随意赞赏

可点击元素之间的距离太近

admin • 2024 年 10 月 07 日