移動端開發注意事項、需要注意的問題、特殊屬性、精靈圖、座固定有自適應的佈局
一、移動端開發注意事項
二、關於meta
（一）、常用的公共meta屬性
1、viewport
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
width=device-width 寬度是裝置螢幕的寬度（畫素）
height=device-height 高度是裝置螢幕的高度（畫素）
initial-scale 初始的縮放比例
minimum-scale 允許使用者縮放到的最小比例
maximum-scale 允許使用者縮放到的最大比例
user-scalable 使用者是否可以手動縮放
2、Format-detection
format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html裡的一些格式的，那關於meta的format-detection屬性主要是有以下幾個設定：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以連寫：meta name="format-detection" content="telephone=no,email=no,adress=no"
如果禁用，我們呼叫撥號功能可以這麼寫！
如下：
<a href="tel:4008106999,1034">400-810-6999 轉 1034</a>
撥打手機直接如下：
<a href="tel:15677777777">點選撥打15677777777</a>
點選撥號蘋果手機就會出現如下圖：
安卓手機會直接到號碼輸入撥打的介面。
3、http-equiv
這個屬性是很老的屬性了，一般手機網頁都是要有一定快取的，所以這個可以不用設定，關於更多的meta，請看我之前的一篇文章：網站連結
（二）、IOS私有meta屬性
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
1、第一個meta：
<meta name="apple-mobile-web-app-capable" content="yes" />
說明：
網站開啟對web app程式的支援。
如果content設定為yes，Web應用會以全屏模式執行，反之，則不會。content的預設值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。
還有一個全屏顯示的屬性就是：
<meta name="apple-touch-fullscreen" content="yes" />
為了更好的相容，兩個meta可以都寫上！
2、第二個meta：
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
說明：
在web app應用下狀態條（螢幕頂部條）的顏色；
預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：
若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。
具體如下圖：
（三）、IOS其他私有設定
新增主屏設定：
新增主屏之後，桌面圖片和啟動畫面如何設定呢？
桌面圖示設定：
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
兩者的區別如下：
啟動畫面的設定：
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
當然，可以指定不同尺寸。
（四）、其他瀏覽器私有meta屬性【除非特需，一般不推薦使用】
1、QQ瀏覽器私有
全屏模式
<meta name="x5-fullscreen" content="true">
強制豎屏
<meta name="x5-orientation" content="portrait">
強制橫屏
<meta name="x5-orientation" content="landscape">
應用模式
<meta name="x5-page-mode" content="app">
2、UC瀏覽器私有
全屏模式
<meta name="full-screen" content="yes">
強制豎屏
<meta name="screen-orientation" content="portrait">
強制橫屏
<meta name="screen-orientation" content="landscape">
應用模式
<meta name="browsermode" content="application">
3、其它
針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
<meta name="HandheldFriendly" content="true">
微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
windows phone 點選無高光
<meta name="msapplication-tap-highlight" content="no">
完整的移動端開發資訊的常用設定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移動端開發公共屬性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 用來檢測html裡的一些格式的 -->
<meta name="format-derection" content="telephone=no">
<!-- 蘋果私有meta屬性 -->
<!-- 網站開啟對web app程式的支援 -->
<meta name="apple-mobile-web-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- 在web app應用下狀態條（螢幕頂部條）的顏色； -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>移動端</title>
<!-- IOS其他私有設定 -->
<!-- 桌面圖示設定 -->
<link rel="apple-touch-precomposed" href="images/haoroomsicon.jpg">
<!-- 啟動畫面的設定 -->
<link rel="apple-touch-startup-image" href="images/haoroomsicon.jpg">
<!-- h5相容性處理及檔案加速 -->
<!--[if lt IE 9]>
<script type="text/javascript" src="./html5shiv.js"></script>
<script type="text/javascript" src="./respond.js"></script>
<![endif]-->
</head>
三、關於樣式
1、上下拉動滾動條時卡頓、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
2、禁止複製、選中文字
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解決移動裝置可選中頁面文字(視產品需要而定)
3、長時間按住頁面出現閃退
element {
-webkit-touch-callout: none;
}
4、iphone及ipad下輸入框預設內陰影
Element{
-webkit-appearance: none;
}
5、ios和android下觸控元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0) ;
或者
-webkit-tap-highlight-color:none;
}
設定alpha值為0就可以去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。
後面一篇文章有詳細介紹，地址：點選連結
6、active相容處理
<body ontouchstart="">
7、動畫定義3D啟用硬體加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意：3D變形會消耗更多的記憶體與功耗
8、Retina屏的1px邊框
Element{
border-width: thin;
}
9、旋轉螢幕時，字型大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
10、transition閃屏
/設定內嵌的元素在 3D 空間如何呈現：保留3D /
-webkit-transform-style: preserve-3d;
/ 設定進行轉換的元素的背面在面對使用者時是否可見：隱藏 /
-webkit-backface-visibility:hidden;
11、圓角bug
某些Android手機圓角失效
background-clip: padding-box;
補充知識精靈圖的使用：
1.精靈圖：多個小圖片組合成一張大圖片。
左邊定寬，右邊自適應（佈局）
左邊定寬的盒子新增：float:left;
右邊自適應的盒子新增：overflow:hidden;
若有不足請多多指教！希望給您帶來幫助！