利用chrome可以同步移动端和PC端的web开发调试,前提是,Android系统版本必须4.0+,而且必须用chrome,或者Android 4.4系统版本以上的原生app里面的webview才可以。

由于Android 4.4的原生app webview 的调试暂时还比较少,所以,这里简单说一下chrome下的调试。

1、移动设备和PC设备必须安装了chrome 32以上的版本,移动设备必须为Android4.0+;

2、移动设备进入设置功能,设置为开发模式;

3、PC端chrome打开chrome://inspect/#devices,里面的选项打勾;

4、用数据线连接移动设备与PC设备;

5、手机开启usb调试模式(一般插了数据线会弹出提示);

6、然后在移动设备上用chrome打开你要调试的网址,这时,PC端会识别到移动设备上的chrome的浏览情况;

7、点击PC端的某网址下的inspect,就会弹出开发者模式,大功告成。

详情看下图:

 

如果想看看Android 4.4的原生app  webview调试,就看下图:

 

 

整理关于区别各大浏览器的css hack

区别符号:  [ \9 ],[ * ],[ _ ],[ !important ] ……       以及css选择符前缀法:[*html”],[*+html]……
符号说明: 
[ \9 ]:仅IE系列能识别;
[ * ]:仅IE6、IE7能识别;
[ _ ]:仅IE6识别;
[*html”]:仅IE6识别;
[*+html]:仅IE7识别;
[:root .class{****\9}]:仅IE9能识别 ;
@media all and (min-width:0){ .class{ ****\9 } }:仅IE9能识别,不过权重(优先级)比一行的小
 [ !important ]:仅IE6不能识别,即IE7、IE8、IE9、Firefox、Chrome、Safari、Opera能识别。
例子:
 .test{
 background:blue;
 background:red\9;
 *background:black;
 _background:orange;
 }
 :root .ie9{
background:yellow\9;
}

分析:
第一条:是正常情况下的;第二条:是专属IE系列的;第三条:是专属IE6、IE7的;第四条:是专属IE6的。
至此,我们可以从其他浏览器中区分出IE来,而IE里面,我们还区分了IE6、IE7,可是IE8、9呢?就是下面那段,只要我们把 [.ie9] 这个类名也加到元素中去的话,就可以区别IE8和IE9了。记着,不要跟上面那个混淆了。
所以,根据浏览器从上往下读的顺序,而且从下往上分析,可以得出注释()里的结果;而[ !important ]的用法则是这样的:background:green !important;

 

前面几个是加在css属性的前后,但是[*html”],[*+html]则是加在选择符前面。
记着,要用类名,不要用id,无论是上面的方法还是下面的方法,因为类名可以叠加多个类名,而id只能有一个,而且权重(优先级)比类名重。

例子:
*html .test{/*仅仅IE6能识别*/
background:blue;
}
*+html .test{/*仅仅IE7能识别*/
background:blue;
}

 

根据自己的需要,自己灵活运用以上的hack进行组合,得出 自己想要的结果

判断IE版本的语句<!–[if IE]><![endif]–>http://hedgehogking.com/?p=128
© 2012 Hedgehog Suffusion theme by Sayontan Sinha