移动端开发技巧+移动端适配方法笔记

一、开发技巧

1、  流式布局：不使用固定像素布局，用百分比布局或一些自适应的布局。布局内容是朝网页两端填充的布局。主要适用于：图片比较多的首页、门户、电商等。

2、  标准的viewport设置（width=device-width、initial-scale=1.0、user-scalable=no三个必填设置）

<meta
name="viewport"content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
3、在移动端点击a标签，会有高亮的效果，如果不需要可以清除

方法为：-webkit-tap-highlight-color: transparent;

4、在移动端经常使用百分比布局。过多的使用百分比等非固定像素布局，如果再想加上边框的话，宽度还是是默认以内容开始计算的话，宽度会超出百分比，对一些效果的影响就很大。可以设置box-sizing: border-box;让宽度以边框开始计算，防止内容溢出（注意兼容-webkit-box-sizing: border-box;）。

5、在移动端有些浏览器渲染form表单时除了有一些边框和高亮的情况（可以通过border:none;和outline:none;来消除），还有一些会有内阴影的效果。如果想去除的话可以通过-webkit-appearance:none;（表单类型）来去除。

6、在写一些移动端的页面时，可以用一些有固定宽度百分比布局（流失布局的一种，像淘宝和京东的移动版的首页就是这种方法写的），这时要设置一个最小宽度和最大宽度。因为移动端的设计图一般都是640的设计图，所以最大宽度一般设置为640px，同时也可以达到最好的效果。设置最小宽度，为了适应更小的屏幕，一般为320px。

7、  input放到form里面是为了让手机键盘的enter键改变成搜索按钮

<form action="#">

<input type="search"/>

</form>

8、  像淘宝的移动端在做适配的时候，是把网页缩小了一倍。

9、  网页的小图标如果1:1的显示在移动设备当中图标就会失真，出现毛边的情况。

这时可以通过压缩图标尺寸的方式来解决。（淘宝用的该方法）

如果是img，使用直接设置宽高来压缩图片。

如果是背景图，使用设置background-size的方式来解决

二、适配方法

         1、动态改变viewport（代码太多）

<meta name="viewport" id="viewport" content="target-densitydpi=526.478149100257, width=640, user-scalable=no, minimal-ui">

当改变屏幕的宽度是target-densitydpi=526.478149100257会随之改变。

         2、通过改变body的zoom属性来适配

         functionresetZoom(){

         vardeviceWidth=document.documentElement.clientWidth;//获取设备宽度

         varscale=deviceWidth/640;//640是psd设计图宽度

         document.body.style.zoom=scale;

}

3、流式布局（百分比布局，不多说）

4、通过rem进行适配，动态改变HTML的font-size:;属性

function resetFont(){

         varHTML=document.getElementsByTagName('html')[0];

         vardeviceWidth=document.documentElement.clientWidth;//获取设备宽度

         varscale=deviceWidth/640;//640是psd设计图宽度

         HTML.style.fontSize=100*scale+'px';

}