移动webAPP前端开发技巧汇总2

一、关于单位的使用

可能在传统的PC端来说，1px=1px的比例。而在移动端却不是这样，1px = ?。因为出现了一个像素密度这样个东西，就不能在移动端使用“PX”这个单位。可能在你的大屏手机是1px等于1点几个像素，可能在小屏手机却刚好。就好比网页的兼容性一样，浏览器的内核不同，解析当然会有所不同！

正好，CSS3又给你出现了一个新的单位“rem”。当然出现了这样的问题，首先我们就会去问问神奇的“百度”。大多数网友给出的答案是:“给html根元素的字体大小设置font-size:62.5%，再来使用rem这个单位就能很好的解决这个问题！”

这样设置后:就会得到一个兑换比例值:1rem = 10px; 如果我们要给一个"h1"标签设置字体大小为20px的时候。我们就直接设置为rem就好了！

代码如下:

html{font-size:62.5%;}
h1{fon-size:2rem} ==>h1{fon-size:20px}

二、布局上

相信布局不用我多说什么了，就按照正常的网页布局来写，一般设计师给的效果图是640*960.我们就按照320的比例来做，就是宽度减少一半。可能多数人跟我之前是一样，字体用单位“rem”。其它照样使用px这个单位。好吧！最近又被严格的UI设计师，找出问题来了，你怎么这里跟我效果图对不上呀！....

好吧！原来想偷工减料的就这样写的，没办法，既然被严格的查起来了，又得去找解决方案！(可能之前也没太在意这些细节，一直就这样拖着)

暂时找了个合适的解决方案，这样既解决了字体单位的问题，又兼容单位像素的问题，只是换算麻烦点！

比如:我们要设置一个宽度为60px的盒子.换算成rem单位就是:60/2/20 = 1.5rem; 前提是我们需要在头部添加以下代码:

PS:效果图实际像素为60px，在手机端就是30px，在转化成rem单位就在除以20。

html {
    font-size : 20px;
}
@media only screen and (min- 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min- 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min- 481px){
    html {
        font-size: 30px !important;
    }
}
@media only screen and (min- 569px){
    html {
        font-size: 35px !important;
    }
}
@media only screen and (min- 641px){
    html {
        font-size: 40px !important;
    }
}

可能还有更好的解决方案,暂时没找到更好的方案...

三、细节处理

可能处理细节就是在解决兼容性的问题吧！还好手机端没有蹦出个IE来，基本都是webkit内核和IOS自带的浏览器。

1、禁止自动识别电话和android自动识别邮箱

2、使用无衬线字体

body {
       font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    }

OS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明，华文黑体并不存在iOS的字体库中，但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁

Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

原生Android下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback

4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体

其他第三方 Android 系统也一致选择默认的无衬线字体

3、禁止选择文本

html, body {
      -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
      user-select: none;
}

4、禁止长按链接与图片弹出菜单

a, img {
       -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
    }

5、去除A连接input标签，点击出现自带的阴影样式

a,input{
    -webkit-tap-highlight-color:rgba(0,0,0,0);/*ios android去除自带阴影的样式*/
    }

6、屏蔽阴影:

-webkit-appearance:none;

可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。

7、单击延迟

click 事件因为要等待双击确认，会有 300ms 的延迟，体验并不是很好。

开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。