标签:常见问题 viewport focus ant scala android系统 页面 实现 表示
meta基础知识
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 --> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>
常见问题
android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; }
<meta name="msapplication-tap-highlight" content="no">
.css{-webkit-appearance:none;}
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}
input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display: none; }
input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display: none; }
.css{-webkit-user-select:none}
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
事件 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{} }
$(‘html‘).one(‘touchstart‘,function(){ audio.play() })
body{-webkit-text-size-adjust: 100%!important;}
<input autocapitalize="off" autocorrect="off" />
input::-webkit-input-speech-button {display: none}
<!-- 1.ios7+支持自动播放 2.支持Airplay的设备(如:音箱、Apple TV)播放 x-webkit-airplay="true" 3.播放视频不全屏 webkit-playsinline="true" --> <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
标签:常见问题 viewport focus ant scala android系统 页面 实现 表示
原文地址:http://www.cnblogs.com/wangyongx/p/7909345.html