前言：

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

一、移动端页面常识

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>　　定义标题，方便搜索引擎搜索

<meta name="keywords" content="移动主页" />　　定义关键字，方便搜索引擎搜索

<meta name="description" content="这是灵魂dancing的个人主页，欢迎参观" />　　定义页面描述内容，方便搜索引擎搜索

<meta name="robots" content="index,follow" />　　定义网页索引方式，设定站点内容是否公开

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

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

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

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

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

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

<meta name="author" content="灵魂dancing" />　　定义网页作者，方便搜索引擎搜索

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.禁止数字自动识别为电话，禁止自动转地址和邮件为链接

<meta content="telephone=no" name="format-detection">

<meta content="address=no" name="format-detection">

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

<meta property=og:title content="">

<meta property=og:description content="">

<meta property=og:url content=http://m.baidu.com>

<meta property=og:content content="">

7.IOS设备

<meta name="apple-mobile-web-app-capable" content="yes" />　　启用webapp全屏模式

<meta name="apple-mobile-web-app-title" content="灵魂dancing" />　　添加页面到桌面时，设置标题

<link  rel="apple-touch-icon-precomposed" href="images/57x57.png" />　　IOS的webapp必备！

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.打开数字键盘
<input type=“tel”>
 
4.隐藏地址栏
setTimeout(function(){
　　window.scrollTo(0,1);
},0);
 
5.使用tap fastclick，解决click延迟问题，防止点击穿透
 
6.横竖屏切换
<style media=“all and (orienttation:poortrait)” type=“text/css">
　　竖屏
</style> 
<style media=“all and (orienttation:landscape)” type=“text/css">
　　横屏
</style>
 

内容持续更新中...

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

移动端web学习总结的更多相关文章

  1. HTML5与移动端web学习笔记

    HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...

  2. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  3. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  4. 移动端web app开发学习笔记

    移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...

  5. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  6. Web学习之css

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  7. 移动端web页面如何适配

    移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...

  8. Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问

    本篇内容还是建立在上一篇Java Web学习系列——Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Jar包 这 ...

  9. 开发移动端web的一些知识

    由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewpor ...

随机推荐

  1. Randomize select algorithm 随机选择算法

    从一个序列里面选择第k大的数在没有学习算法导论之前我想最通用的想法是给这个数组排序,然后按照排序结果返回第k大的数值.如果使用排序方法来做的话时间复杂度肯定至少为O(nlgn). 问题是从序列中选择第 ...

  2. Zend studio注册码

    Zend studio 7.1 注册码 username:lisijie_orgLicense Key:3F4F495657BF3F4A95657BF3 Zend studio 8 注册码(适用于7. ...

  3. SGU132 - Another Chocolate Maniac(状态压缩DP)

    题目大意 给定一个N*M大小的大小的蛋糕,蛋糕的有些地方已经放置了东西,要求你在蛋糕上放入尽量少的1*2大小的巧克力,使得蛋糕不能够再放入巧克力 题解 和POJ1038恰好相反,此题是放入尽量少的巧克 ...

  4. C# 多个个Dictionary合并更优雅的写法

    Dictionary 现在有两个Dictionary的对象,想把两个对象的中数据合并成一个. 使用for循环的话觉得非常不合适,于是考虑是否有相应的方法,网上找了很多,都是for循环,最后终于找到了一 ...

  5. Codeforces Round #138 (Div. 2) ACBDE

    A.Parallelepiped 题意:给一个六面体三面的面积,求12条边的长度和. 题解:因为都是整数,设边长分别为a,b,c,面积为xyz,那么可设x=a*b,y=b*c,z=c*a,简单解方程就 ...

  6. 软件工程 --- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试]

    软件工程  ---   Pair Project: Elevator Scheduler [电梯调度算法的实现和测试] 说明结对编程的优点和缺点. 结对编程的优点如下: 在独立设计.实现代码的过程中不 ...

  7. 多年的.NET开发，也只学会了这么几招

    折腾了这么多年的.NET开发,也只学会了这么几招 软件开发不是生活的全部,但是好的生活全靠它了   随着工作年龄逐渐增加,身边的重担也越来越多.以前可以在公司加班到晚上10点,现在不行了.以前可以通宵 ...

  8. eclipse 护眼色

    eclipse windows 窗口背景颜色 保护视力 博客分类: 工具使用 EclipseWindows  eclipse  窗口背景颜色 windows 窗口背景颜色

  9. 查看SQL语句执行时间、IO开销

    SET STATISTICS TIME ON SET STATISTICS IO ON或者set statistics io,time on

  10. 【原创】OllyDBG 入门系列（一）－认识OllyDBG

     ****** http://blog.fishc.com/645.html   标 题: [原创]OllyDBG 入门系列(一)-认识OllyDBG作 者: CCDebuger时 间: 2006-0 ...