移动端开发之viewport、fiddler

因为之前做的开发都是针对PC端的，突然同学让我帮他写一个'个人简介'的页面，要求自适应移动端，写完之后我发现，在pc上的效果还行，结果到了手机上，一个词形容"惨不忍睹",所以赶紧去找资料，进行兼容处理...

meta中的viewport

例如：

<meta name="viewport" content="width=240,height=320,user-scalable=yes,initial-scale=2.5,maximum-scale=5.0,minimum-scale=1.0">

  在以上的代码中：  width和height指令分别指定视区的逻辑宽度和高度。他们的值可以是以像素为单位的数字，或者一个特殊的标记符号。width指令使用device-width标记指示视区宽度应为设备的屏幕宽度。类似的height指令使用device-height标记指示视区高度为设备的品目高度。  user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，职位no时不允许缩放。  initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个web页面，设置为1.0则将显示未将缩放的web文档。  maximu-scale和minimum-scale指令用于设置用户对web页面缩放比例的限制。值的范围为0.25~10.0之间，与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。  所有智能手机浏览器都支持ViewPort<meta>标记的width和user-scalable指令，而不是主张用户种种保留在移动浏览器中缩放web野蛮的能力。

fiddler工具

fiddler是一个很好用的抓包工具，它通过代理实现数据获取，   android&iPhone手机通过将网络连接的代理只想PC机的Fiddler端口，来实现数据包的拦截，从而能够清楚的看到手机发送的数据包。要完成抓包，需要满足一下要求：1.安装Fiddler，同时确保fiddler安装的PC与手机在可以互访的局域网内；（要不然无法连接）2.开启fiddler远程连接：tools->fiddler options->connections "Allow remote computers to connect"勾上，然后重启fiddler；3.设置android&iPhone手机代理：ip为fiddler安装机ip，端口为fiddler设置值，默认为8888；4.https会话获取需要额外设置下，tools ->fiddler options -> https "Capture HTTPS CONNECTS"以及下面的子项勾选；5.设置ok，然后android&iPhone App or 网页访问，fiddler中可以随时抓取数据包。这样对于移动端的测试就方便多了.

具体的请参考移动前端开发之viewport的深入理解