【一系列重要的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>
网友评论