自己第一次做手机web页面的一些总结
发表时间：2017-5-22
发布人：葵宇科技
浏览次数：31
一、 移动端web开发的单位
1. 单位
先来罗列下学习移动页面构建的过程中可能看到过一些单位：
px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……
对上诉单位简单做个分类，并对其中一些关系进行比较
（1）什么是绝对长度单位？什么是相对长度单位？
绝对长度单位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（派卡 四号字体尺寸）。关系1in = 2.54cm = 25.4 mm = 72pt = 6pc，
网页中应用比较少。
相对长度单位：是手机网页设计中使用最多的长度单位，包括rem、px、em等。
px:在手机中和电脑一样是基于分辨率，但手机上同时4.7寸屏幕的分辨率：可以是1- 3倍像素，iphone 6和7是2倍像素，iphone 6plus和7plus为2.6倍像素，安卓手机中低档一般为2倍像素，高端机一般会做到3倍像素，对于做各种机型兼容px是无法满足的；如使用px作为基本上每个手机上显示的都会有差异
em:em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。对于页面中有多种字体大小的不适合；而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
rem：是基于一个根尺寸，最小只能设置12px，在media中指定不同分辨率下的根尺寸所有尺寸都以它为基准计算；用rem的好处是你写样式的时候长度只需要写一次，而且在开发工具上安装rem和px的转换工具可以自动转换，(在4.7屏幕设置基准值为16px是一个比较好的转换值,这样5.2为18,5.7为20,6.2为22)
（2）什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？
屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、4.7、5.0、5.2、5.5、5.7、6.0等。目前 基本上是4.7起的屏幕
屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080（红色点）蓝色点为1dp
屏幕像素密度：屏幕上每英寸可以显示的像素点的数量，单位是dpi或ppi。在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。
最明显的就是iPhone 3GS和iPhone 4的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。
计算像素密度的公式：
勾股定理算出对角线的分辨率：√(1920^2+1080^2)≈2203px
对角线分辨率除以屏幕尺寸：2203/5≈440dpi。
（3）什么是dp、sp、ppi、dpi、dip、mdpi、hdpi、xdpi、xxdpi？
这些单位主要用于手机app使用，对于手机web页面并不识别
ppi和dpi：屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。ppi和dpi是同一个概念，Android比较喜欢使用dpi，iOS比较喜欢使用ppi。
dp、dip：都是密度独立像素，可以想象成是一个物理尺寸，使同样的设置在不同手机上显示的效果看起来是一样的。
mdpi、hdpi、xdpi、xxdpi：
像素密度：简单点就是非高清屏、高清屏、超高清屏。（dpi值越大越清晰）
dpi和转换参数的关系:
dpi我们都知道，是指像素密度；转换参数是指，dp与px之间的转换系数。
如下图，dp指蓝色块，px指红色块，很明显密度更大的右图中每个dp含有的px个数更多。可以得出结论：dpi密度越大，转换参数越大。 dp = （DPI/（160像素/英寸））px
所以对于不同分辨率的值dp也是固定的
对于apk最好使用的单位是dp而对于手机web页面最好使用的是rem
并且假设pc端和手机端的交互和页面设计变动不大的情况下使用rem完全可以只写一套页面，一套样式
对于手机端设计的图标通常分辨率会是2倍图或者3倍图来做的，这点要问清设计师
并且这段 meta标签很重要
<metaname="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">
user-scalable：用户是否可手动缩放
width=device-width：设置像素和屏幕等宽
initial-scale=1.0：像素宽度和屏幕宽度的比值
二、 移动端web开发的调试
1. chrome浏览器的Toggle device toolbar调试工具可以模拟手机端的请求，对刚开始手机端页面布局也有较好的帮助
2. chrome ToDevice插件，pc和手机登录同一谷歌账号，可将pc网页地址推送至手机端，手机输入网址太麻烦了
3. Hbulider 前端开发工具：做html页面时使用该工具可以立即看到更改后的效果，对于调整页面细节使用这个还原度100%。在手机浏览器输入在Hbulider生成的html页面地址即可访问
4. 需要测试后台数据时俩中方式;手机root安装host工具绑定host；pc上安装Fiddler，设置端口号，手机上wifi设置中设置动态代理，ip为pc的ip端口号为Fiddler设置的
5.调试js时：手机和电脑usb连接，手机开启开发者模式，手机和电脑都安装chrome浏览器，手机chrome浏览器打开，pc chrome上地址栏输入：chrome://inspect/#devices；可在pc上控制手机chrome浏览器的运行，手机chrome浏览器上的事件响应可以反应到pc上，这样就可以在pc端上调试手机上的web页面了
开发时使用1+2+3基本就可以，当事件响应有差异时才需要使用5，前后端测试时使用4
三、 移动端web开发中一些兼容性做法
1. 手机端的按钮复制功能兼容性比较好：clipboard.js
2. 禁止页面自动识别手机号码：<metaname="format-detection" content="telephone=no">
3.禁止复制选中文本：Element {
-webkit-user-select: none;-moz-user-select: none;
-khtml-user-select: none;user-select: none;
}
3. ios系统输入框阴影： -webkit-appearance: none;
4. a标签的active兼容处理 即 伪类:active失效：<body ontouchstart="">
5. keyup进行表单验证时手机对复制的内容无响应：手机对keyup、keydown、keypress支持不是很好，表单验证时同时监听keyup和input事件
对input type=’number’类型，maxlength无效，只能通过keyup动态获取长度多余的去除，但是对于可输入+-.这3个符号暂无比较好的处理方法；祛除number输入框默认样式：
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
appearance: none;
margin: 0;
}
6. 当input输入框被软键盘遮挡时：输入框自动往上弹，兼容性比较好的方法是：document.getElementById("account").scrollIntoView(true);键盘弹出时是个延时过程加载调用该方法时需增加延时，同时对body{margin-bottom:150px}，
