Chrome Emulation-移动设备特性随意配

当我们还在使用旧版Chrome调试移动端H5网页时，Chrome33.0.1750.154 m版本已经悄悄地将更强大的移动端网页调试功能融入到了开发者工具中。

前段时间更新了Chrome之后，还纳闷我的开发者工具中User Agent（用户代理）消失到哪里去了，琢磨了半天，才发现她

隐藏到了这里，像一位羞涩的姑娘一样躲在人群中，可是当你发现她时，她就是你心中这样的女神
是不是很性感呢？

对于重构来说，除了emulator（模拟器）以外，其他三项可忽略。
emulator中包括了Device（设备）、Screen（屏幕）、User Agent（用户代理）、Sensor（媒体）四项，相对旧版本来说，明显丰富了很多，从相对比较全面的角度来模拟真实移动设备的特性。

先来看看Device
主要包含了市面上比较主流的移动设备Iphone3GS-5、 Gumsung Galaxy不同型号、以及诺基亚、摩托罗拉、HTC、LG、黑莓、索尼的部分机型。
遗憾的是国产主流手机（小米、华为、中兴）和却没有上榜，可能由于开发者工具是由国外友人开发，人家的眼界比较开阔，而不仅仅是局限在中国。

不过没关系，即便是没有国内主流机型，苹果、三星主流机型已经足够，如果还是觉着没满足，其实除了设备，Screen很大程度上也能帮助我们测试H5页面。

这里我们可以设置：

1. 不同的分辨率值；
2. Ratio值（设备像素比例，物理像素（设备实际像素）和独立像素（设备上的小格子）的比例，针对Ratina屏而言的），非Retina屏时，这里的设备像素比为1，物理像素=独立像素；
3. 使文字跟随分辨率和ratio值一起变化（文字大小随设备分辨率和Ratio值一同调整，以达到适配不同屏幕文字大小显示合理）；
4. 模拟窗口特性（最大最小缩放比例、是否禁止缩放、设备宽度和高度）也就是我们常用的这个<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">；
5. 是否用来缩放以适配屏幕设备。
6. 媒体类型（基本上已经全部涵盖），重构常使用screen或者是print或者是all。
    

非常全面的模拟了移动设备的各种硬件特性和软件特性。

除了模拟具体的移动设备，chrome模拟器还模拟了具体设备的具体底层应用：Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3

附常见useragent：
iOS5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A334 Safari/7534.48.3
Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405 Safari/7534.48.3
标准浏览器 (Android OS 4.x)
Mozilla/5.0 (Linux; U; Android 4.0.1; ja-jp; Galaxy Nexus Build/ITL41D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Mozilla/5.0 (Linux; U; Android 4.1.1; ja-jp; Galaxy Nexus Build/JRO03H) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
OS6.x
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; KDDI-TS01; Windows Phone 6.5.3.5)
OS7.x
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI)
版本10 (Windows) [参考：IEBlog]
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0)
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0)
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0)

当物理特性已经模拟的很完美的时候，如果这个界面不能使用鼠标来操作交互（屏幕不支持触摸事件的前提下），那可能是最让开发者崩溃的一件事情了。
所幸Chrome开发人员还是考虑非常周全的，屏幕的触摸模拟事件为Chrome新版再添一神笔，移动设备上的滑动到了PC就演变成了摁住鼠标拖拽等等。

除此等等，模拟地理位置、重力感应也都是让人非常喜欢的功能。

通过对Chrome Emulation的学习，也尝试对博客进行了简单的调试。
 

除了Android SDK 和 Opera 模拟器，Chrome Emulation是我认为最轻便、最方便、最真实、最易学的移动设备模拟器，强烈推荐使用。

原文地址： http://www.css3china.com/?p=457

转载于:https://www.cnblogs.com/css3China/p/3680363.html