- fullPage.js 兼容桌面端(ie5.5+) 和 手机端
- H5FullscreenPage.js 基于zepto全屏滚动
- slip.js 移动端跟随手指滑动组件,零依赖
- iSlider.js H5全屏滑动组件
- zepto.fullpage.js 可实现移动端的单页滚动效果,可自定义参数,提供回调接口,和公开接口。
- touch.js 百度移动设备上的手势识别与事件库
- hammer.js 一个多点触控手势的JavaScript库
- quo.js JavaScript手势库
- swiper.js 纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端
- normalize.css
- HTML5 Reset
- sanitize.css
- typo.css 一致化浏览器排版效果,构建最适合中文阅读的网页排版
- animate.css 常用的css3动画库
- magic.css
- Effeckt.css 挺齐全的
- 动画工具 腾讯ISUX 在线css3动画工具
- parallax.js 自适应智能设备方向的视差效果插件
- loaders.css 纯CSS加载动画
- http://loading.io/ 在线 SVG / CSS / GIF
- pageResponse.js 使用transform:scale缩放页面
- adaptive.js javascript H5自适应框架
- hotcss.js 移动端布局开发解决方案
-
prefixfree.js CSS3前缀补齐 附带介绍
-
jquery.css3finalize.js CSS3前缀补齐
-
响应式网页测试工具 能够帮助你测试在网页设计和构建过程中的界面效果
- 移动web资源整理 白色橡树
- 滑屏 H5 开发实践九问 腾讯ISUX
- HTML5终极备忘大全
-
页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> -
当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari(ios7.0版本以后,safari上已看不到效果)
<meta content="yes" name="apple-mobile-web-app-capable"> -
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式(可选default、black、black-translucent)
<meta content="black" name="apple-mobile-web-app-status-bar-style"> -
忽略将页面中的数字识别为电话号码
<meta content="telephone=no" name="format-detection"> -
忽略Android平台中对邮箱地址的识别
<meta content="email=no" name="format-detection">
-
禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
-webkit-touch-callout: none; -
禁止ios和android用户选中文字
-webkit-user-select:none; -
去掉被触摸时产生的半透明灰色遮罩
-webkit-tap-highlight-color: transparent; -
字体清晰
-webkit-font-smoothing: antialiased; -
设置placeholder颜色
input::-webkit-input-placeholder{color:#RED;} input:focus::-webkit-input-placeholder{color:#RED;} -
善用active属性: 点击时效果
-
打电话
<a href="tel:10086">10086</a> -
发短信
<a href="sms:10086">短信:10086</a> -
发邮件
<a href="mailto:xxx@qq.com">电子邮箱:xxx@qq.com</a> -
关注微信
<a href="weixin://addfriend/kuaipao8-com">微信号:xxx</a>