移动端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> 定义标题,方便搜索引擎搜索
<meta name="keywords" content="移动主页" /> 定义关键字,方便搜索引擎搜索
<meta name="description" content="这是灵魂dancing的个人主页,欢迎参观" /> 定义页面描述内容,方便搜索引擎搜索
<meta name="robots" content="index,follow" /> 定义网页索引方式,设定站点内容是否公开
设定为all:文件将被检索,且页面上的链接可以被查询;
设定为none:文件将不被检索,且页面上的链接不可以被查询;
设定为index:文件将被检索;
设定为follow:页面上的链接可以被查询;
设定为noindex:文件将不被检索,但页面上的链接可以被查询;
<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.可以屏蔽点击元素时出现的阴影,常用于有事件代理的父节点
内容持续更新中...
如有错误的地方或者更好用的方法,希望大家能在评论区留言指正,让我们共同进步!
移动端web学习总结的更多相关文章
- HTML5与移动端web学习笔记
HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 移动端web app开发学习笔记
移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- Web学习之css
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问
本篇内容还是建立在上一篇Java Web学习系列——Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Jar包 这 ...
- 开发移动端web的一些知识
由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewpor ...
随机推荐
- HDU-4665 Unshuffle 搜索 | 2-SAT
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4665 本题的2-SAT建图颇为复杂,有时间再来填坑(自己写的一直挂着,标程建图太复杂了)...然后用暴 ...
- 沈晓军 / LarvaFrame - 代码托管 - 开源中国社区
沈晓军 / LarvaFrame - 代码托管 - 开源中国社区 统计
- 细谈Linux和windows差异之图形化用户接口、命令行接口
相信来看本博文的朋友,肯定是已经玩过linux好段时间了,才能深刻理解我此番话语. 这是在Windows下的命令行接口 这是windows下的用户接口 就是它,explorer.ext,可以去尝试.把 ...
- Android实例-操作sqlite数据库之Grid显示图片(XE8+小米2)
结果: 1.数据库文件,记得打包到程序中(assets\internal\). 操作方法: 1.新建firemonkey mobile application①菜单->File->New- ...
- 一种从JSON数据创建Java类的高效办法
<一种从JSON数据创建Java类的高效办法> 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs JSON格式的数据经常会遇到,比如调用Web服 ...
- js难点之闭包理解
如何从外部读取局部变量? 闭包就是能够读取其他函数内部变量的函数. 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”. 所以 ...
- 【Stage3D学习笔记续】山寨Starling(六):动画实现和测试
我发布了一个版本v0.2,该版本是未优化版本,且没有添加Touch事件体系,但是由于是最基础且未优化的,所以可以通过参考代码快速的了解实现原理. 接下来的一段笔记开始进行渲染优化,我会把所有的目光都集 ...
- oracle下的OVER(PARTITION BY)函数介绍
转自:http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数介绍 开窗函数 ...
- CAS总结之Ticket篇
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- Android上实现仿IOS弹性ScrollView
[转]http://www.tuicool.com/articles/ummIJb