在chrome的device mode下测试的页面好好的,一在手机测试样式就有问题?


做的移动端页面在chrome的device mode下好好的,装在手机上就出了点问题。
不知该怎么办,有什么工具直接能调试手机上的样式。
刚试了试debugGap,不管用。

web前端开发 HTML 移动web开发 css

你ID没我神 9 years, 3 months ago

手机端出现和你chrome调试模式不一致的情况是经常遇到的,比如有这样几种情况:
1.嵌入在手机QQ,微信里面的webview,由于对css的某些诸如iframe,css3等属性和标签的支持度不够,容易导致比较严重的兼容问题。
2.不同的手机设备,不同的手机系统也容易导致样式或者js不兼容。比如webkit浏览器的display:flex在ios6系统中就不支持。
3.手机浏览器和手机中的webview会有不同的渲染模式,通常情况下,你在手机浏览器中能正常显示,但是到应用中的webview就出问题了。
至于你说的调试,个人项目的话你可以开个localhost,ping一下你的ip地址访问就可以。但是公司做项目的话,一般都有测试机。
解决方案:
1.不使用不支持的css属性和html标签
2.使用caniuse.com去查询不支持的浏览器
3.测试,发现问题及时解决,做兼容

HiiRo飛 answered 9 years, 3 months ago

如果只是切页面还没和后端做联调,可以用node或python开个服务,然后手机端访问刷新,就能随时更改随时浏览了

weilong answered 9 years, 3 months ago


如果只是网页

  1. 使用fiddler,让其开个代理给手机访问,细节自行搜索

  2. mac使用safari调试手机的safari

  3. xcode调试
    ....

委屈自己一秒 answered 9 years, 3 months ago

有一个比较简单的方法,手机或者电脑开热点连接,或者一个路由器下使用IP访问。

长濑朔月枫 answered 9 years, 3 months ago

在chrome device mode并不能100%模拟真机,而且手机上各种浏览器,各种内核,然后就带来了各种坑。

如果是在android chrome或iphone safari上可以不用安装任务软件直接usb连接电脑进行调试。
移动前端调试方案(Android + Chrome 实现远程调试)
Safari 前端开发调试 iOS 完美解决方案

大松井玲奈 answered 9 years, 3 months ago

其他的我不想说 上面的诸位答的很好了 但是有一个问题 什么操作系统 什么浏览器导致出问题 目前世面上浏览器大多数还停留在chrome17类似水平 chrome的手机测试无论怎么做都只能测试新的东西

拉克丝·克莱茵 answered 9 years, 3 months ago

android下chrom和UC(需要安装开发版)浏览器有远程调试功能,如果是使用webview加载页面,那就只能用weinre。如果是ios的话,也有远程调试方案,不过需要苹果电脑,如果你不具备这些条件,那就用weinre。

飞一般的疯猫 answered 9 years, 3 months ago

Your Answer