手机端开发须知简介
1.设备独立像素
就是屏幕的大小，也可以说是屏幕的尺寸（别名叫点，属于一个单位）
获取方法：window.screen.width/window.screen.height
注意：
1.横竖屏切换的时候，真机里的这个值不会改变，但是在模拟器里面是会改变的
2.一个点里，可以放多个像素（也就是px）
3.设备独立像素的值是可以被改变的(对于开发者来说)
2.设备像素
也称作物理像素，是屏幕的分辨率（实际放的像素值，1px就是1px），买手机的时候厂商告诉你的分辨率
这个值是虚拟的，无法获取
3.像素比（dpr，这个值无法修改）
缩放的比例=设备像素（分辨率）/设备独立像素
获取：window.devicePixelRatio
解释：如果说一个设备的dpr是2的话，也就是说在1个点里放2个像素的意思
也就是说，375的设备，可以放750px的元素
4.viewport
width=device-width宽度是设备的宽度
user-scalable 用户能否缩放 yes/no
initial-scale 初始比例，程序员来设置，设置为2的话各个元素就显示为原来的两倍（不要轻易玩这个）
但是加上 这个以后不是把每个元素都缩放了，而是改变了设备的独立像素
minimum-scale 最小能够缩放的比例
minimum-scale 最大能够缩放的比例
几种适配布局的好坏
1.百分比布局
值不好计算
需要确定父级元素的大小，因为素有元素都是根据父级大小进行计算的
宽度可以设置，但是高度不好设置
一般情况下百分比布局都是配合其他布局一起使用的
2.比例缩放适配（把所有机型的设备独立像素都设置成一致的）
viewport需要通过js动态的设置
通过设置比例，把宽度缩放成一致的
注意：viewport里面给了缩放的值以后，最终页面的宽度是拿原来的值除以缩放比例
3.比例适配01（根据dpr的值，把视口进行缩放，缩放到物理像素，也就是把屏幕的尺寸直接设置成他的物理像素）
也是动态的设置viewport
缺点：有些dpr不是整数，会出现除不尽的情况，那缩放的倍数就会出现很长的小数，再去算物理像素的时候就有误差
4.rem适配
px 绝对单位，无论屏幕多大，给多少就是多少，做不到适配
em 相对单位，相对于自身字体大小的值，比如font-size：12px,则1em=12px
问题：chrome下有最小字体限制，必须为12px，所以这个最小只能是12px
如果两个一样的元素，但是里面字体不一样，那就不能统一设置了，或者字体更改的时候也要重新设置
rem 相对单位，css3新增，相对于根节点（html）字体大小来设置
比如html{font-size：10px} 则1rem=10px
通过rem可以做到只修改根元素的大小，就能成比例的调整所有字体的大小
精华
首先rem的换算使用less进行动态的计算，设置好比例就不用自己计算了
less文件写好后右键编译成css文件引入就可以了
其次
进入hbuilder找到 工具-选项-Hbuilder-编译器-代码助手设置 勾选启动px转rem提示，设置好两个比例，确定
最后
写代码的时候只要写了less文件的变量以后，直接写px就可以了，会有自动的代码提示转换成rem
兼容问题汇总（要用真机测试才能测出，chrome模拟器测不出）
1.body下的overflow：hidden问题
body加了overflow：hidden后，如果子元素比body大的话，正产是会被减掉不显示的，但是在ios上仍然显示
也就是说，body的overflow：hidden在ios上面没有起到作用
2.固定定位问题
固定定位在移动端的兼容性很不好，以前老版本的安卓不支持，ios4以前的版本也不支持
比如你fixd定位了header，qq浏览器下有时候向下滑动的话，，header就会隐藏掉
再比如当你打开键盘的时候，固定定位也会失去作用
3.点击链接的时候默认有一个背景,通过a标签去测试
通过-webkit-tab-highlight-color:rgba(0,0,0,0)取消这个默认的背景
4.按钮在ios下面都是圆角，通过input和buton去测试
通过-webkit-appearance:none;消除输入框和按钮的默认外观
border-radius：0；消除圆角
5.每台设备的默认字体是不一样的（移动端设备大都没有宋体和微软雅黑），如果不设置字体则会选择手机默认的字体
选择使用font-family:helvetica字体（大多数手机都有）
6.切换横竖屏或者用户自己通过更改浏览器的设置，可以改变字体的大小
加上-webkit-text-size-adjust:100%;禁止用户更改字体大小（需要加给body下的所有元素）
7.长按文字ios下会选中文字
通过添加-webkit-user-select:none;使长按文字也不能选中
8.手机中的浏览器内核大多是webkit内核