Navigator 对象

Navigator 对象 Navigator 对象包含有关浏览器的信息。 注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。 Navigator 对象集合 集合 描述 plugins[] 返回对文档中所有嵌入式对象的引用。 该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。 虽然 plugins[] 数组是由 IE 4 定义的，但是在 IE 4 中它却总是空的，因为 IE 4 不支持插件和 Plugin 对象。 Navigator 对象属性 属性 描述 appCodeName 返回浏览器的代码名。 appMinorVersion 返回浏览器的次级版本。 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 browserLanguage 返回当前浏览器的语言。 cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。 cpuClass 返回浏览器系统的 CPU 等级。 onLine 返回指明系统是否处于脱机模式的布尔值。 platform 返回运行浏览器的操作系统平台。 systemLanguage 返回 OS 使用的默认语言。 userAgent 返回由客户机发送服务器的 user-agent 头部的值。 userLanguage 返回 OS 的自然语言设置。 Navigator 对象方法 方法 描述 javaEnabled() 规定浏览器是否启用 Java。 taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。 from:http://www.w3school.com.cn/jsref/dom_obj_navigator.asp

HTML5 WebStorage(HTML5本地存储技术)

WebStorage是HTML5中本地存储的解决方案之一，在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案，浏览器兼容的本地存储方案只有使用cookie。有同学可能会问，既然有了cookie本地存储，为什么还要引入WebStorage的概念？ Cookie肿么了 cookie的缺陷是非常明显的 1. 数据大小：作为存储容器，cookie的大小限制在4KB左右这是非常坑爹的，尤其对于现在复杂的业务逻辑需求，4KB的容量除了存储一些配置字段还简单单值信息，对于绝大部分开发者来说真的不知指望什么了。 2. 安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的。 3. 网络负担：我们知道cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。 WebStorage WebStorage是HTML新增的本地存储解决方案之一，但并不是为了取代cookie而制定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。 WebStorage提供两种类型的API：localStorage和sessionStorage，两者的区别看名字就有大概了解，localStorage在本地永久性存储数据，除非显式将其删除或清空，sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。两个对象都有共同的API。 复制代码 代码如下: interface Storage {   readonly attribute unsigned long length;   DOMString? key(unsigned long index);   getter DOMString getItem(DOMString key);   setter creator void setItem(DOMString key, DOMString value);   deleter void removeItem(DOMString key);   void clear(); }; 1、length:唯一的属性，只读，用来获取storage内的键值对数量。 2、key：根据index获取storage的键名 3、getItem：根据key获取storage内的对应value 4、setItem：为storage内添加键值对 5、removeItem：根据键名，删除键值对 6、clear：清空storage对象 WebStorage如何使用 在实现了WebStorage的浏览器中，页面有两个全局的对象localStorage和sessionStorage 以localStorage为例，看一段简单的操作代码 复制代码 代码如下: var ls=localStorage;             console.log(ls.length);//0             ls.setItem('name',’Byron');             ls.setItem('age',’24');             console.log(ls.length);//2             //遍历localStorage             for(var i=0;i<ls.length;i++){                 /*                     age : 24                     […]

js移动设备手机跳转地址代码

另外的三种： 版本1

版本2

版本3 百度webapp版

制作《幽灵公主》等动画片的动画软件宣布开源

Toonz公司开发的软件你可能从未听说过，但是你已经看到过无数的电视节目和电影使用其产品。Toonz公司的主要产品是企业动画软件，集成绘图，编辑，动画和合成等功能。Toonz开发的动画软件，曾经被用于创建《飞出个未来》、《幽灵公主》和《千与千寻》等动画片。 据报道，该动画软件免费开源之前的售价曾经高达每张许可证1万美元。但作为DWANGO收购该公司协议的一部分，Toonz公司宣布其下动画软件免费开源。 吉卜力工作室成像执行总监奥井淳表示，该公司使用Toonz动画软件，因为它可以将手工绘制动画和数字绘制无缝结合。吉卜力工作室首先在1995年使用这款软件制作《幽灵公主》动画片。 3月26日，该公司将发布TOONZ吉卜力工作室版动画软件，其中包括与吉卜力工作室合作开发的功能，让独立动画师无需支付高昂的前期费用就使用该软件。相反，TOONZ公司计划让软件免费，通过出售安装服务，培训和支持来获得利润。 稿源：cnbeta

支付宝:如何生成RSA密钥

通过openssl工具生成RSA的公钥和私钥(opnssl工具可在互联网中下载到，也可以点此下载无线接口包，里面包含此工具) 打开openssl文件夹下的bin文件夹，执行openssl.exe文件： 1）生成RSA私钥 输入“生成命令.txt”文件中：“genrsa -out rsa_private_key.pem 1024”，并回车得到生成成功的结果，如下图： 此时，我们可以在bin文件夹中看到一个文件名为rsa_private_key.pem的文件，用记事本方式打开它，可以看到—--BEGIN RSA PRIVATE KEY—--开头，—--END RSA PRIVATE KEY—--结尾的没有换行的字符串，这个就是原始的私钥。 2）把RSA私钥转换成PKCS8格式 输入命令：pkcs8 -topk8 -inform PEM -in rsa_private_key.pem -outform PEM -nocrypt，并回车当前界面中会直接显示出生成结果，这个结果就是PKCS8格式的私钥，如下图： 右键点击openssl窗口上边边缘，选择编辑→标记，选中要复制的文字（如上图）， 此时继续右键点击openssl窗口上边边缘，选择编辑→复制， 把复制的内容粘土进一个新的记事本中，可随便命名，只要知道这个是PKCS8格式的私钥即可。 3）生成RSA公钥 输入命令：rsa -in rsa_private_key.pem -pubout -out rsa_public_key.pem，并回车，得到生成成功的结果，如下图： 此时，我们可以在bin文件夹中看到一个文件名为rsa_public_key.pem的文件，用记事本方式打开它，可以看到—--BEGIN PUBLIC KEY—--开头，—--END PUBLIC KEY—--结尾的没有换行的字符串，这个就是公钥。 详情见开放平台对于密钥生成说明 注意：请妥善保管好生成的公私钥！ 附：点此查看如何上传公钥 from:https://cshall.alipay.com/enterprise/help_detail.htm?help_id=474010 

图文介绍csh是什么格式文件以及csh文件用什么打开

Photoshop中除了.csh文件之外，还有几种常见的格式文件，比如.abr是画笔文件，.aco是色板文件，.grd是渐变文件，.asl是样式文件，.pat是图案文件，.shc是等高线文件，.csh是自定形状文件，.tpl是工具预设文件。 这些格式文件在电脑中不能和软件、图片这些直接打开使用，通常需要加载之后才能使用。 本文介绍的方法，既是对“csh文件用什么打开，csh是什么格式文件”的回答，做到举一反三，遇到类似的，在网上下载的.abr之类的笔刷如何安装如何使用这些问题，一样可以通过预设管理器中载入之后使用。   本文就来一起学习解决.csh文件用什么打开？具体操作如下：   1.笔者现在使用的Photoshop CS6版本，执行“编辑——预设——预设管理器”，打开“预设管理器”对话框。   2.在“预设类型”下拉框中选择“自定形状”，单击“载入”。   说明：比如我们需要安装在网上下载的画笔笔刷，此时在“预设类型”中选择“画笔”，单击“载入”即可。其余格式文件安装方法一样。   3.弹出“载入”对话框，选择相应的.csh文件，单击“载入”即可。   4.单击“完成”，关闭“预设管理器”对话框。   5.在工具箱中找到“自定形状工具”，在自定形状工具属性栏中，单击“形状”下拉箭头，可以找到我们上面载入的.csh文件。 from:http://www.ittribalwo.com/article/2161.html

如何使用<identity impersonate="true"/>

前两天在VS2008下做个项目，用到了excel组件没有问题，但当把该项目在IIS下配置后，用浏览器浏览结果则不正确，网上说用dcom组件配置下，可是我按照要求配了，结果还是不对。 后来找到一个方法好用了。 Web.config中加了一句话：“<identity impersonate="true" userName="操作系统用户" password="用户密码"/>”，浏览…，结果正确，后来我就在网上查了下这句话的作用，MSDN是这样说的： 1、模拟 IIS 验证的帐户或用户 若要在收到 ASP.NET 应用程序中每个页的每个请求时模拟 Microsoft Internet 信息服务 (IIS) 身份验证用户，必须在此应用程序的 Web.config 文件中包含 <identity> 标记，并将 impersonate 属性设置为 true 2、为 ASP.NET 应用程序的所有请求模拟特定用户     若要为 ASP.NET 应用程序的所有页面上的所有请求模拟特定用户，可以在该应用程序的 Web.config 文件的 <identity> 标记中指定 userName 和 password 属性。例如： <identity impersonate="true" userName="accountname" password="password" /> from:http://blog.csdn.net/lazyleland/article/details/7726528

Android 日常开发总结的技术经验 60 条

1. 全部 Activity 可继承自 BaseActivity，便于统一风格与处理公共事件，构建对话框统一构建器的建立，万一需要整体变动，一处修改到处有效。 2. 数据库表段字段常量和 SQL 逻辑分离，更清晰，建议使用 Lite 系列框架 LiteOrm 库，超级清晰且重心可以放在业务上不用关心数据库细节。 3. 全局变量放全局类中，模块私有放自己的管理类中，让常量清晰且集中. 4. 不要相信庞大的管理类的东西会带来什么好处，可能是一场灾难，而要时刻注意单一职责原则，一个类专心做好一件事情更为清晰。 5. 如果数据没有必要加载，数据请务必延迟初始化，谨记为用户节省内存，总不会有坏处。 6. 异常抛出，在合适的位置处理或者集中处理，不要搞的到处是 catch，混乱且性能低，尽量不要在循环体中捕获异常，以提升性能。 7. 地址引用链长时（3 个以上指向）小心内存泄漏，和警惕堆栈地址指向，典型的易发事件是：数据更新了，ListView 视图却没有刷新，这时 Adapter 很可能指向并的并不是你更新的数据容器地址（一般为 List）。 8. 信息同步：不管是数据库还是网网络操作，新插入的数据注意返回 ID（如果没有赋予唯一 ID），否则相当于没有同步。 9. 多线程操作数据库时，db 关闭了会报错，也很可能出现互锁的问题，推荐使用事务，推荐使用自动化的 LiteOrm 库操作。 10. 做之前先考虑那些可以公用，资源，layout，类，做一个结构、架构分析以加快开发，提升代码可复用度。 11. 有序队列操作 add、delete 操作时注意保持排序，否则你会比较难堪喔。 12. 数据库删除数据时，要注意级联操作避免出现永远删不掉的脏数据喔。 13. 关于形参实参：调用函数时参数为基本类型传的是值，即传值；参数为对象传递的是引用，即传址。 14. listview 在数据未满一屏时，setSelection 函数不起作用；ListView 批量操作时各子项和视图正确对应，可见即所选。 15 控制 Activity 的代码量，保持主要逻辑清晰。其他类遵守 SRP（单一职能），ISP（接口隔离）原则。 16. arraylist 执行 remove 时注意移除 int 和 Integer 的区别。你懂得。 17. Log 请打上 Tag，调试打印一定要做标记，能定位打印位置，否则尴尬是：不知道是哪里在打印。 18. 码块/常量/资源可以集中公用的一定共用，即使共用逻辑稍复杂一点也会值得，修改起来很轻松，修改一种，到处有效。 19. setSelection 不起作用，尝试 smoothScrollToPosition。ListView 的 LastVisiblePosition（最后一个可见子项）会随着 getView 方法执行位置不同变动而变。 20. 与 Activity 通讯使用 Handler 更方便； 如果你的框架回调链变长，考虑监听者模式简化回调。 […]

移动端尺寸基础知识

初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960, 640×1136, 750×1334, 1242×2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。 所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。 倍率与逻辑像素 再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。 在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。 在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。 由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。 如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率： ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] xxxhdpi [4倍] 各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据： 就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义： ldpi 如今已绝迹，不用考虑 mdpi [320×480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小） hdpi [480×800、480×854、540×960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位） xhdpi [720×1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位） xxhdpi [1080×1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上） xxxhdpi [1440×2560]（极少数2K屏手机，比如Google Nexus 6） 自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。 不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480×800和1080×1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320×533和360×640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。 单位 不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。 单位之间的换算关系随倍率变化： 1倍：1pt=1dp=1px（mdpi、iPhone 3gs） 1.5倍：1pt=1dp=1.5px（hdpi） 2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6） 3倍：1pt=1dp=3px（xxhdpi、iPhone 6） 4倍：1pt=1dp=4px（xxxhdpi） 单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。 无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。 Web怎么办 移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。 可以通过这个测试页面 http:/m/test.html 来看看你的移动设备屏幕宽度，这是逻辑像素宽度。 以iPhone 5s为例，屏幕的分辨率是640×1136，倍率是2。浏览器会认为屏幕的分辨率是320×568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。 实际应用 大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。 之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。 要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？ 首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。 再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。 现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。 下面来看看3个平台各自的画布设置： […]

关于适配你需要知道的—MobileWeb适配总结

开门见山，本篇将总结一下MobileWeb的适配方法，即我们常说的H5页面、手机页面、WAP页、webview页面等等。 本篇讨论的页面指专门针对手机设备设计的页面，并非兼容全设备的响应式布局。 文中提到的 device-width 指 viewport meta 标签中 width 的值，即由浏览器指定的值，常用机型对应值可参照Screen Sizes。 适配达到的效果是什么？ 在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。 适配应关注哪些要素？ 一般来说，我们需要关注的是：字体、高宽间距、图像（图标、图片）。 其中，图像相对要复杂一些，针对流量、清晰度等问题网上也有比较成熟的解决方案，比如：矢量化、字体化、image-set 等等，在此不做深入。在满足快速开发的需求下，我们使用较为偷懒的方式：利用 css 将图像限定在元素内（ img 图片使用 [max-]width: 100% ，背景图像使用 background-size ），布局只针对元素进行。 另外要考虑到，设计师设计视觉稿时使用什么样的宽度，才能既满足设计自身的需求又能让前端开发方便的切图适配。 举个例子 围绕这三要素，我们用一个小例子来说明接下来要介绍的三种方案的实现方式，按 640px 标准需实现的效果如图： app.jpg 固定高度，宽度自适应 这是目前最通用的一种做法，属于自适应布局，viewport width 设置为 device-width，以较小宽度（如 320px）的视觉稿作为参照进行布局。垂直方向的高度和间距使用定值，水平方向混合使用定值和百分比或者利用弹性布局，最终达到“当手机屏幕变化时，横向拉伸或者填充空白的效果”。图像元素根据容器情况，使用定值或者 background-size 缩放。 粗略浏览了下一些大厂的首页，像百度、腾讯、Facebook、Twitter 都是采用的这种方案。 要点： 以小宽度作为参照是因为如果布局满足了小宽度的摆放，当屏幕变宽时，简单的填充空白就可以了；而如果反过来就可能造成“挤坏了”，考虑 header 区域，左测 logo 右测横向 nav 的情况。 需要小宽度的布局，又需要大宽度的图像，这是一个矛盾点。 320px 过于窄小，不利于页面的设计；只能设计横向拉伸的元素布局，存在很多局限性。 兼容性较好。 实现比较简单，样式中的尺寸都按照视觉稿二分之一大小设置，查看效果和代码。 固定宽度，viewport 缩放 视觉稿、页面宽度、viewport width 使用统一宽度，利用浏览器自身缩放完成适配。页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值单位 （px、em）即可完成。 优点： 开发简单：缩放交给浏览器，完全按视觉稿切图。 还原精准：绝对等比例缩放，可以精准还原视觉稿（不考虑清晰度的情况下）。 测试方便：在PC端即可完成大部分测试，手机端只需酌情调整一些细节（比如图标、字体混合排列时，因为字体不同造成的对齐问题）。 存在的问题： 像素丢失：对于一些分辨率较低的手机，可能设备像素还未达到指定的 viewport 宽度，此时屏幕的渲染可能就不准确了。比较常见的是边框“消失”了，不过随着手机硬件的更新，这个问题会越来越少的。 缩放失效：某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport，需要配合 initial-scale 。 文本折行：存在于缩放失效的机型中，某些手机为了便于文本的阅读，在文本到达 viewport 边缘（非元素容器的边缘）时即进行折行，而当 viewport 宽度被修正后，浏览器并没有正确的重绘，所以就发现文本没有占满整行。一些常用的段落性文本标签会存在该问题。 缩放失效问题需通过 js 动态设定 initial-scale

文本折行问题可以通过 […]