一.手機端開發頁面必須要加一段程式碼:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
注:這段程式碼的主要意思是:讓頁面寬度等於裝置寬度,縮放比例為1,禁止使用者縮放。用於檢測視口,主要的效果就是取消下面的滾動條,讓頁面適應螢幕。
二.為自己的頁面設定最大寬度和最小寬度:
{
max-width:640px;
min-width:320px;
}
主要作用是在螢幕足夠大的時候,頁面也不會失真。
三.相容手機螢幕大小不同的情況:
window.onload=window.onresize=function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+'px';
};
在寫移動端頁面的時候要加上這一段程式碼,這段程式碼意思是:讓視口或者說頁面的可見寬度與根元素的字元大小產生對應關係,例如上面這段程式碼意思是在視口寬度為640px的時候,讓根元素的字元大 小為40px(也就是1rem等於40px),這樣在視口不斷變化的時候,根元素的字元大小也會不斷變化,而且有固定的係數(1/16),這樣就產生了對應關係,也就是相容了不同螢幕大小不一樣的情況。
具體用法:引用上述js程式碼,在設計圖640px的情況下測量距離,然後在把距離除以40,並把px為rem,這樣就可以了,注:js裡的40和640可以根據需要靈活更改,但要注意字元預設情況下最小為12px且widow.onload在只能出現一次。
四.去掉 a,input 在移動端瀏覽器中的預設樣式
1.禁止 a 標籤背景
在移動端使用 a標籤做按鈕的時候,點按會出現一個“暗色”的背景,去掉該背景的方法如下:
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
2.禁止長按 a,img 標籤長按出現選單欄
使用 a標籤的時候,移動端長按會出現一個 選單欄,這個時候禁止撥出選單欄的方法如下
a, img {
-webkit-touch-callout: none;
}
3.流暢滾動
body{
-webkit-overflow-scrolling:touch;
}
4.修改webkit表單輸入框placeholder的樣式
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
5.禁止ios和android使用者選中文字
.css{-webkit-user-select:none}
五. 其他
1.手機拍照和上傳圖片
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視訊 -->
<input type=file accept="video/*">
2.取消input在ios下,輸入的時候英文首字母的預設大寫
<input autocapitalize="off" autocorrect="off" />
3.打電話和發簡訊
<a href="tel:0755-10086">打電話給:0755-10086</a>
<a href="sms:10086">發簡訊給: 10086</a>
viewport模板
<!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"> <!--當網站新增到主螢幕快速啟動方式,可隱藏位址列,僅針對ios的safari-->
<meta content="black" name="apple-mobile-web-app-status-bar-style"> <!--將網站新增到主螢幕快速啟動方式,僅針對ios的safari頂端狀態條的樣式-->
<meta content="telephone=no" name="format-detection"> <!-- 禁止將頁面中的數字識別為電話號碼-->
<meta content="email=no" name="format-detection"> <!--忽略Android平臺中對郵箱地址的識別-->
<title>title</title>
<link rel="stylesheet" href="index.css">
</head>