移动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}