移动端web学习总结

前言：

　　一直想做一个移动端的阶段性学习总结，但是工作太忙总是加班。现在总算可以抽出一点时间来写一写，把知道的都写下来，这样就算忘掉了，也能很快想起来，不要太机智啊，哈哈哈！

一、移动端页面常识

1.常见操作系统：Android、IOS、Firefox、os

2.使用内核：webkit（Android、IOS）, greasemonkey（Firefox、os）

3.在移动端上，要使用手势操作代替鼠标输入/输出事件

4.请务必使用响应式布局来设计移动端页面

5.用CSS3动画代替传统的DOM animation（CSS3动画可以使用移动端设备的GPU渲染）

6.移动端开发，要用轻量级框架和库（一切为了快！再快！更快！同时还可以节省用户流量）

7.使用canvas代替image标签（因为image在屌丝机上会让你卡！到！爆！）

8.降低请求数（让你的页面加载速度飞起来！降低后端压力，你好我也好！）

9.合理使用渐变、圆角、阴影（别太多，屌丝机不兼容 T.T ）

二、移动端要关注的head头标签

1.<!DOCTYPE html>　告诉浏览器，文档类型是HTML5，不用区分大小写

2.<meta charset="UTF-8" /> 　声明文档采用的编码格式

3.SEO优化：

<title>标题</title>　　定义标题，方便搜索引擎搜索

　　设定为all：文件将被检索，且页面上的链接可以被查询；

　　设定为none：文件将不被检索，且页面上的链接不可以被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的链接可以被查询；

　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；

　　设定为nofollow：文件将不被检索，页面上的链接可以被查询。

4.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />　　对于不同移动设备，分辨率物理尺寸不一样，会进行一些缩放，为了展示效果一样就要设置viewport

　　width：宽度，width=device-width

　　height：高度，height=device-height

　　initial-scale：初始缩放比例，initial-scale=1.0

　　maximum-scale：最大缩放比例， maximum-scale=1.0

　　user-scalable：是否允许用户缩放， user-scalable=yes/no

5.禁止数字自动识别为电话，禁止自动转地址和邮件为链接

6.支持开放内容协议，使你的网页变成“富媒体对象”，支持分享到其他社会化网站，如facebook、人人等

7.IOS设备

rel：图片自动处理成圆角和高光效果，apple-touch-icon-precomposed表示禁止自动添加效果，直接显示原图

三、移动端页面图标使用推荐：

1.SVG实现：矢量图标，自适应窗口大小。下面链接是阿里矢量图库，海量图标等你来取~

http://iconfont.cn/repositories

2.CSS3实现：纯CSS3实现的图标，更轻量级，更方便。严重推荐！

http://saeedalipoor.github.io/icono/

四、移动端最佳框架推荐

requireJS：最小巧的javascript载入框架，定义javascript模块。

Zepto.js：使用方法与jQuery相同，轻量级框架，可以认为是jQuery的移动精简版。

五、小技巧

1.可以屏蔽点击元素时出现的阴影，常用于有事件代理的父节点

-webkit-tap-highlight-color: reba(255,255,255,0);

2.使用flex伸缩布局

3.打开数字键盘

4.隐藏地址栏

setTimeout(function(){

　　window.scrollTo(0,1);

},0);

5.使用tap fastclick，解决click延迟问题，防止点击穿透

6.横竖屏切换

　　竖屏

</style>

　　横屏

</style>

内容持续更新中...

如有错误的地方或者更好用的方法，希望大家能在评论区留言指正，让我们共同进步！

秒客网

移动端web学习总结

相关文章