移动端开发的杂七杂八

【一系列重要的meta标签声明】

<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=0">

<meta name="app-mobile-web-app-capable" content="yes">

<meta name="format-detection" content="telephone=no">

<meta http-equiv="pragma" content="no-cache">

【去除表单默认外观】

-webkit-appearance:none;

【去除a链接、表单按钮的默认透明蓝色遮罩背景】

-webkit-tap-highlight-color: rgba(0,0,0,0)；

【修改placeholder属性的文本颜色】

-webkit-input-placeholder：color:‘自己所需’；

【解决3D动画显示闪烁的问题】

-webkit-backface-visibility：hidden

【激活iphone中的active伪类效果，给a和button标签绑定】

var aA=document.getElementsByTagName('a');

for( var i=0; i<aA.length; i++ ){

    aA[i].addEventListener( 'touchstart',function(){},false );

} 

var aBtn=document.getElementsByTagName('button');

for( var i=0; i<aBtn.length; i++)

   aBtn[i].addEventListener( 'touchstart',function(){},false );

}

【解决iphone的快速流畅滑动效果，可以放在body里面，任何用到滑动的地方都可以用到，设置固定高度加上overflow-y:auto，模拟iscroll的滑动效果】

-webkit-overflow-scrolling : touch;

【禁止用户选中文字】

-webkit-user-select:none;

【打电话、发信息和发邮件】

<a href="tel:13650960577">拨打电话</a>

<a href="sms:10086">发送信息</a>

<a href="mailto:1648238539@qq.com">发送邮件</a>

【阻止旋转屏幕时自动调整字体大小】

html,body,form,p,div,h1,h2,h3,h4{ -webkit-text-size-justify:none }

【屏幕旋转onorientationchange事件和检测】

<script>

       addEventListener( 'load',function(){

           onorientationChange();

            window.onorientationchange=orientationChange;

     });

    function orientationChange(){      //判断屏幕是否旋转

            swith( window.orientation ){

                case 0:

                    alert('正面')；

                     break;

                case 90:

                     alert('向右旋转90度');

                      break;

                 case -90:

                       alert('向左旋转负90度');

                       break;

                 case 180:

                       alert('风景模式');

                        break;   

           }

    } 

</script>