一、meta標簽相關知識1、移動端頁面設置視口寬度等于設備寬度，并禁止縮放。2、移動端頁面設置視口寬度等于定寬（如640px），并禁止縮放，常用于微信瀏覽器頁面。3、禁止將頁面中的數字識別為電話號碼4、忽略Android平臺中對郵箱地址的識別5、當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari6、將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式viewport模板? ? content...
?二、CSS樣式技巧1、禁止ios和android用戶選中文字.css{-webkit-user-select:none}2、禁止ios長按時觸發系統的菜單，禁止ios&android長按時下載圖片.css{-webkit-touch-callout: none}3、webkit去除表單元素的默認樣式.css{-webkit-appearance:none;}4、修改webkit表單輸入框placeholder的樣式input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}5、去除android a/button/input標簽被點擊時產生的邊框 & 去除ios a標簽被點擊時產生的半透明灰色背景a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}6、ios使用-webkit-text-size-adjust禁止調整字體大小body{-webkit-text-size-adjust: 100%!important;}7、android 上去掉語音輸入按鈕input::-webkit-input-speech-button {display: none}8、移動端定義字體，移動端沒有微軟雅黑字體/* 移動端定義字體的代碼 */body{font-family:Helvetica;}
三、其他技巧1、手機拍照和上傳圖片2、取消input在ios下，輸入的時候英文首字母的默認大寫3、打電話和發短信打電話給:0755-10086發短信給: 10086
四、CSS reset/* hcysun? */@charset "utf-8";/* reset */html{? ? -webkit-text-size-adjust:none;? ? -webkit-user-select:none;? ? -webkit-touch-callout: none? ? font-family: Helvetica;? ? -webkit-overflow-scrolling:touch}body{font-size:12px;}body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}em{font-style:normal}li{list-style:none}a{text-decoration:none;}img{border:none; vertical-align:top;}table{border-collapse:collapse;}textarea{ resize:none; overflow:auto;}/* end reset */
五、常用公用CSS style/* public *//* 清除浮動 */.clear { zoom:1; }.clear:after { content:''; display:block; clear:both; }/* 定義盒模型為怪異和模型（寬高不受邊框影響） */.boxSiz{? ? -webkit-box-sizing: border-box;? ? -moz-box-sizing: border-box;? ? -ms-box-sizing: border-box;? ? -o-box-sizing: border-box;? ? box-sizing: border-box;}/* 強制換行 */.toWrap{? ? word-break: break-all;? ? ? /* 只對英文起作用，以字母作為換行依據。 */? ? word-wrap: break-word;? ? ? /* 只對英文起作用，以單詞作為換行依據。*/? ? white-space: pre-wrap;? ? /* 只對中文起作用，強制換行。*/}/* 禁止換行 */.noWrap{? ? white-space:nowrap;}/* 禁止換行,超出省略號 */.noWrapEllipsis{? ? white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}/* 文字兩端對齊 */.text-justify{? ? text-align:justify;? ? text-justify:inter-ideograph;}/* 定義盒模型為 flex布局兼容寫法并讓內容水平垂直居中 */.flex-center{? ? display: -webkit-box;? ? display: -moz-box;? ? display: -ms-flexbox;? ? display: -o-box;? ? display: box;? ? -webkit-box-pack: center;? ? -moz-box-pack: center;? ? -ms-flex-pack: center;? ? -o-box-pack: center;? ? box-pack: center;? ? -webkit-box-align: center;? ? -moz-box-align: center;? ? -ms-flex-align: center;? ? -o-box-align: center;? ? box-align: center;}/* public end */
六、flex布局1、定義彈性盒模型兼容寫法/*? ? box? ? inline-box*/display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -o-box;display: box;2、box-orient 定義盒模型內伸縮項目的布局方向/** * vertical column? 垂直 * horizontal row? 水平 默認值 */-webkit-box-orient: horizontal;-moz-box-orient: horizontal;-ms-flex-direction: row;-o-box-orient: horizontal;box-orient: horizontal;3、box-direction 定義盒模型內伸縮項目的正序(normal默認值)、倒敘(reverse)/* Firefox */display:-moz-box;-moz-box-direction:reverse;/* Safari、Opera 以及 Chrome */display:-webkit-box;-webkit-box-direction:reverse;4、box-pack 對盒子水平富裕空間的管理/*? ? start? ? end? ? center? ? justify*/-webkit-box-pack: center;-moz-box-pack: center;-ms-flex-pack: center;-o-box-pack: center;box-pack: center;5、box-pack 對盒子垂直方向富裕空間的管理/*? ? start? ? end? ? center*//* box-align */-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;-o-box-align: center;box-align: center;6、定義伸縮項目的具體位置/*-moz-box-ordinal-group:1;*/ /* Firefox *//*-webkit-box-ordinal-group:1;*/ /* Safari 和 Chrome */.box div:nth-of-type(1){-webkit-box-ordinal-group:1;}.box div:nth-of-type(2){-webkit-box-ordinal-group:2;}.box div:nth-of-type(3){-webkit-box-ordinal-group:3;}.box div:nth-of-type(4){-webkit-box-ordinal-group:4;}.box div:nth-of-type(5){-webkit-box-ordinal-group:5;}7、定義伸縮項目占空間的份數-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari 和 Chrome */ .box div:nth-of-type(1){-webkit-box-flex:1;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}
