首页 > 代码库 > 移动web开发常见的问题

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

移动web开发常见的问题