移动web开发常见的问题

1.屏幕旋转的事件和样式

事件

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

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{}

}

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

应对方案：触屏即播

$('html').one('touchstart',function(){

audio.play()

})

3.摇一摇功能

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

4.手机拍照和上传图片

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

<!-- 选择照片 -->

<input type=file accept="image/*">

<!-- 选择视频 -->

<input type=file accept="video/*">

使用总结：

• iOS有拍照、录像、选取本地图片功能
• 部分android只有选取本地图片功能
• winphone不支持
• input控件默认外观丑陋

5.消除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动画的几个要素

• 尽可能地使用合成属性transform和opacity来设计CSS3动画
• 不使用position的left和top来定位
• 利用translate3D开启GPU加速

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

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