有關Meta
基本Meta
<!-- 設置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本以後，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別爲電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection" content="telephone=no, email=no" />
搜索引擎Meta
<!-- 搜索引擎索引方式：通常有如下幾種取值：none，noindex，nofollow，all，index和follow。-->
<meta name="robots" content="index,follow" />
<!--
all：文件將被檢索，且頁面上的鏈接可以被查詢；
none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
index：文件將被檢索；
follow：頁面上的鏈接可以被查詢；
noindex：文件將不被檢索；
nofollow：頁面上的鏈接不可以被查詢。
-->頁面緩存設置Meta
<!-- 清除緩存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
常見問題
移動端字體設置
/*中英字體名對照表
宋體 SimSun
黑體 SimHei
微信雅黑 Microsoft Yahei
微軟正黑體 Microsoft JhengHei
新宋體 NSimSun
新細明體 MingLiU
細明體 MingLiU
標楷體 DFKai-SB
仿宋 FangSong
楷體 KaiTi
仿宋\_GB2312 FangSong\_GB2312
楷體\_GB2312 KaiTi\_GB2312
說明：中文字體多數使用宋雅黑，英文用Helvetica
*/
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
打電話發短信寫郵件
// 打電話
<a href="tel:010-88888">打電話給:010-88888</a>
// 發短信
<a href="sms:88888">發短信給: 88888</a>
// 寫郵件
//注：在添加這些功能時，第一個功能以"?"開頭，後面的以"&"開頭
//1.普通郵件
<a href="mailto:[email protected]">快來點我啊，給你發種子。</a>
//2.收件地址後添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
<a href="mailto:[email protected][email protected]">快來點我啊，給你發種子。</a>
//3.跟着抄送地址後，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
<a href="mailto:[email protected][email protected]&[email protected]">快來點我啊，給你發種子。</a>
//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址
<a href="mailto:[email protected];[email protected]">快來點我啊，給你發種子。</a>
//5.包含主題，用?subject=
<a href="mailto:[email protected]?subject=郵件主題">快來點我啊，給你發種子。</a>
//6.包含內容，用?body=;如內容包含文本，使用%0A給文本換行
<a href="mailto:[email protected]?body=郵件主題內容%0A我是第二行內容%0A你沒有猜錯，這是我是第三行。">快來點我啊，給你發種子。</a>
//7.內容包含鏈接，含http(s)://等的文本自動轉化爲鏈接
<a href="mailto:[email protected]?body=http://www.wtf.com">快來點我啊，給你發種子。</a>
//8.內容包含圖片（PC不支持）
<a href="mailto:[email protected]?body=<img src='images/torrent.jpg' />">快來點我啊，給你發種子。</a>
//9.完整示例
<a href="mailto:[email protected];[email protected][email protected]&[email protected]&subject=[郵主題\]&body=我是第一行內容%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">快來點我啊，給你發種子。</a>
touch事件
事件響應順序：ontouchstart > ontouchmove > ontouchend > onclick
touchstart——當手指觸碰屏幕時候發生touchmove——當手指在屏幕上滑動時連續觸發。- 通常在滑屏頁面，會調用
event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動 touchend——當手指離開屏幕時觸發touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()，此時會觸發該事件，這個事件比較少用。
TouchEvent說明：
- touches：屏幕上所有手指的信息
- targetTouches：手指在目標區域的手指信息
- changedTouches：最近一次觸發該事件的手指信息
- touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，用於計算手指信息
參數信息(changedTouches[0])
- clientX、clientY在顯示區的座標
- target：當前元素
科普：移動端click事件200-300ms的延時響應
以下是歷史原因：
2007年蘋果發佈首款iphone上IOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區域進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，如果在t時間區間裏用戶未進行下一次點擊，則瀏覽器會做單擊跳轉鏈接的處理，如果t時間裏用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。
造成的後果用戶純粹單擊頁面，頁面需要過一段時間才響應，給用戶慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回調函數處理，需要300ms後才生效，也就間接導致影響其他業務邏輯的處理。
解決方案：
點擊元素產生背景或邊框問題
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符
}
/也可以...，簡單粗暴/
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
字體單位font-size選擇px還是rem
/*如需適配多種移動設備，建議使用rem。以下爲參考值：*/
html { font-size: 62.5%; } /*10÷16 = 62.5%\*/
/*設置12px字體。
注：在rem前要加上對應的px值，解決不支持rem的瀏覽器的兼容問題，做到優雅降級*/
body { font-size:12px; font-size:1.2rem; }
其它一些實用CSS技巧
/*禁止長按鏈接與圖片彈出菜單*/
a,img { -webkit-touch-callout: none }
/*禁止ios和android用戶選中文字*/
html,body {-webkit-user-select:none; user-select: none; }
/*改變輸入框placeholder的顏色值*/
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
/*android上去掉語音輸入按鈕\*/
input::-webkit-input-speech-button {display: none}
禁用input在ios下，輸入英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
屏幕旋轉的事件和樣式
JS處理：
function orientInit(){
var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk =='lapdscape'){
//橫屏下需要執行代碼
}else{
//豎屏下需要執行代碼
}
}
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
setTimeout(orientInit, 100);
},false)
CSS處理：
/*豎屏時樣式*/
@media all and (orientation:portrait){ }
/*橫屏時樣式*/
@media all and (orientation:landscape){ }
播放視頻不全屏
<!--
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>
消除transition閃屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}點擊樣式閃動
Q: 當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color，這個屬性是用於設定元素在移動設備（如Adnroid、iOS）上被觸發點擊事件時，響應的背景框的顏色。建議寫在樣式初始化中以避免所以問題：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出現藍色邊框：outline:none；
-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
-webkit-tap-highlight-color : transparent ;
屏蔽用戶選擇
Q: 禁止用戶選擇頁面中的文字或者圖片
A:代碼如下
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
移動端如何清除輸入框內陰影
Q: 在iOS上，輸入框默認有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：
A:代碼如下
-webkit-appearance: none;
禁止文本縮放
Q: 禁止文本縮放
A:代碼如下
-webkit-text-size-adjust: 100%;
如何禁止保存或拷貝圖像
Q: 如何禁止保存或拷貝圖像
A:代碼如下
img{-webkit-touch-callout: none;}
解決字體在移動端比例縮小後出現鋸齒的問題
Q: 解決字體在移動端比例縮小後出現鋸齒的問題
A:代碼如下
-webkit-font-smoothing: antialiased;
設置input裏面placeholder字體的大小
Q: 設置input裏面placeholder字體的大小
A:代碼如下
::-webkit-input-placeholder{ font-size:10pt;}
audio元素和video元素在ios和andriod中無法自動播放
Q: audio元素和video元素在ios和andriod中無法自動播放
A:代碼如下,觸屏及播放
$('html').one('touchstart',function(){
audio.play()
})
手機拍照和上傳圖片
Q: 針對file類型增加不同的accept字段
A:代碼如下
<input type="file">的accept 屬性
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">
輸入框自動填充顏色
Q: 針對input標籤已經輸入過的，會針對曾經輸入的內容填充黃色背景，這是webkit內核自動添加的，對應的屬性是autocomplete,默認是on,另對應的樣式是input:-webkit-autofill 且是不可更改的。
A:方案如下 1 設置標籤的autocomplete="off",親測無效可能 2 設置盒子的內陰影爲你常態的顏色（下面以白色爲例）
box-shadow:0 0 0 1000px #fff inset ;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
開啓硬件加速
Q: 優化渲染性能
A:代碼如下
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
用戶設置字號放大或者縮小導致頁面佈局錯誤
body
{
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
移動端去除type爲number的箭頭
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
實現橫屏豎屏的方案
css 用 css3媒體查詢，缺點是寬度和高度不好控制
@media screen and (orientation: portrait) {
.main {
-webkit-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100vh;
height: 100vh;
/*去掉overflow 微信顯示正常，但是瀏覽器有問題，豎屏時強制橫屏縮小*/
overflow: hidden;
}
}
@media screen and (orientation: landscape) {
.main {
-webkit-transform:rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
}
js 判斷屏幕的方向或者resize事件
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$print = $('#print');
if( width > height ){
$print.width(width);
$print.height(height);
$print.css('top', 0 );
$print.css('left', 0 );
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
}
else{
$print.width(height);
$print.height(width);
$print.css('top', (height-width)/2 );
$print.css('left', 0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}
}, false);