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

Question

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

Answer 1

如果只是网页

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

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

3. xcode调试
   ....

Answer 2

http://zhuxinyong.com/2014/07/20/weinre%E8%BF%9C%E7%A8%8B%E8%B0%83%E8%AF%95web-mobile/

Answer 3

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

Answer 4

手机端出现和你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.测试，发现问题及时解决，做兼容

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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