meta標(biāo)簽相關(guān)知識
移動端頁面視口設(shè)置
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
針對ios優(yōu)化
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
禁止設(shè)備識別
<meta name="format-detection"content="telephone=no, email=no" />
緩存處理
<meta http-equiv="Cache-Control" content="no-transform,no-siteapp" />
樣式處理技巧
-webkit-user-select:none;//禁止用戶選中文字
--webkit-touch-callout: none;//禁止用戶長按下載圖片
-webkit-appearance:none;;//格式化mac定制input等樣式
--webkit-tap-highlight-color:rgba(255,0,0,0);;//去除a標(biāo)簽被點(diǎn)擊時產(chǎn)生的半透明灰色背景
-webkit-text-size-adjust: 100%;或-webkit-text-size-adjust: none;//禁用Webkit內(nèi)核瀏覽器的文字大小調(diào)整功能
設(shè)備判斷
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移動終端瀏覽器版本信息 trident: u.indexOf('Trident') > -1, //IE內(nèi)核 presto: u.indexOf('Presto') > -1, //opera內(nèi)核 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器 iPhone: u.indexOf('iPhone') > -1 , //是否為iPhone或者QQHD瀏覽器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1,//是否web程序蕴纳，沒有頭部與底部 wechat:u.indexOf('micromessenger') != -1//是否微信 }; }(), }
使用：if(browser.versions.mobile && browser.versions.android){//安卓事件};
