我的网站(www.petbutty.com/)在移动设备友好测试中失败,显示内容比屏幕宽,可点击元素之间的距离太近。 请帮我解决这些问题。
答案 0 :(得分:0)
图像问题是您应提供已调整为不同视口的图像。您可以通过使用不止一个尺寸的每个图像并针对特定视口更改来做到这一点。这样可以为用户保存移动数据。现在,您正在向屏幕上的370-400px宽(非视网膜计数)提供一些超过1900px的图像。
这里是其中的example。
您可以使用的名为srcset,您应该阅读该文章(或this)并将其应用,它的简短版本是您使用类似的内容
<img src="image_for_bowsers_that_dont_support_srcset.jp" srcset="dog-360w.jpg 360w, dog-800w.jpg 800w, dog-1200w 1200w" alt="doggy dog">
学习https://www.responsivebreakpoints.com/
时,您可以使用此在线工具来测试并生成图像也没有在图像中放置文字,主要有两个原因
我要给您的其他建议是:
在category circles on "shop by category"上设置固定的宽度和高度。
在移动设备中缩小徽标,可以使用srcset
。
还有更多可以解决的问题,但这只是少数几个。