网页需要横向滚动屏幕才能查看其中的文字和图片,这说明页面中某些元素的CSS样式使用了宽度的绝对值,例如图片、表格使用的980px宽度等,这种问题的修改方法是,在css中使用响应式设计方法,当浏览器宽度介于0像素和640像素之间时,使用适合移动设备的css,将宽度设置为相对值,或者将部分元素隐藏。示例代码如下:
@media screen and (max-width:640px) { #divMain { width:100%; } #divSidebar { display:none; } }
以上的处理方式应该是google一个比较官方的处理方法,总的思路是没有问题的,www.887551.com在处理的时候基本看到的都是这种方式。
使用响应式编程是移动设备兼容性必要的一个方式,能够解决掉很多网页的移动设备易用性问题,www.887551.com参考此方法后解决掉了大部分提示的问题,但是还是有个别的网页存在提示问题,所以需要更多的查看网页,每个标签,每个标签的内容是否存在问题。
这里google本身推荐了他的一个检测网页工具,地址 https://search.google.com/test/mobile-friendly,移动设备适用性测试工具,都需要翻墙才能访问的。可以提前测试你的网页是否符合google的规范和要求,先通过这个工具检测后,再到后台提交验证,这样就基本能通过google的再次检测了。
www.887551.com这里总结下,亲自调试测试的一些方法,以供参考
1、去掉页面中内容的左右滚动效果,这样的效果是不被允许的
2、使网页的内容充满屏幕,不存在可以左右滑动的效果
3、查看图片或者p等标签是否设置了自己的固定宽带width,去掉这样固定设置的css代码
4、一些复杂的内容,比如引入第三方的js插件生成的等,可以先去掉此内容
编辑:www.887551.com,欢迎分享