window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert(“横屏:” + window.orientation); case 0: case 180: alert(“竖屏:” + window.orientation); break; } }

样式

//竖屏时使用的样式 @media all and (orientation:portrait) { .css{} } //横屏时使用的样式 @media all and (orientation:landscape) { .css{} }

22.audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

$(‘html’).one(‘touchstart’,function(){ audio.play() })

23.摇一摇功能

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

24.手机拍照和上传图片

<input type=”file”>的accept 属性

<!– 选择照片 –> <input type=file accept=”image/*”> <!– 选择视频 –> <input type=file accept=”video/*”>

使用总结：

25. 消除transition闪屏

.css{ /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-transform-style: preserve-3d; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ -webkit-backface-visibility: hidden; }

开启硬件加速

解决页面闪白

保证动画流畅

.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

设计高性能CSS3动画的几个要素

26. android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

框架 1. 移动端基础框架

zepto.js语法与jquery几乎一样，会jquery基本会zepto~

iscroll.js解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~

underscore.js该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

fastclick加快移动端点击响应时间

animate.cssCSS3动画效果库

Normalize.cssNormalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

2. 滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

3.瀑布流框架

masonry

工具推荐

caniuse各浏览器支持html5属性查询

调色搭配

本文固定链接:

转载请注明: Yang 2015年11月16日 于 爱七七五八网 发表

最后编辑：2015-11-16

作者：Yang

梦想有多远，我就要走多远！

捐 赠如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！