web移動開發小貼士
1、判斷手機類型
var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
2、iphone及ipad下輸入框默認內陰影
Element{
-webkit-appearance: none;
}
3、ios和android下觸摸元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉鏈接的a標簽換成其它標簽，可以解決這個問題。
4、Retina屏的1px邊框
Element{
border-width: thin;
}
5、頂部狀態欄背景色（ios）
設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
content 參數：
default ：狀態欄背景是白色。
black ：狀態欄背景是黑色。
black-translucent ：狀態欄背景是半透明。 如果設置為 default 或 black ,網頁內容從狀態欄底部開始。 如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。
6、設置緩存
<meta http-equiv="Cache-Control" content="no-cache" />
手機頁面通常在第一次加載後會進行緩存，然後每次刷新會使用緩存而不是去重新向服務器發送請求。如果不希望使用緩存可以設置no-cache。
7、桌面圖標
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
8、IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
解決方法：可以用html5的oninput事件去代替keyup
9、 百度禁止轉碼
通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標簽來禁止它：
<meta http-equiv="Cache-Control" content="no-siteapp" />
可能還有其他類型的數字也會被識別。我們可以通過如下的meta來關閉電話號碼的自動識別：
<meta name="format-detection" content="telephone=no" />
開啟電話功能
<a href="tel:123456">123456</a>
開啟短信功能：
<a href="sms:123456">123456</a>
同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能：
<a mailto:[email protected]">[email protected]</a>
10、點擊延遲
fastclick可以解決在手機上點擊事件的300ms延遲。
zepto的touch模塊，tap事件也是為了解決在click的延遲問題。
11、什麽是Retina 顯示屏，帶來了什麽問題
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣大小的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍。
那麽，前端的應對方案是：
設計稿切出來的圖片長寬保證為偶數，並使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為：200px*200px，那麽寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px。
12、webkit表單輸入框placeholder的顏色值能改變麽？
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
13、ios系統中元素被觸摸時產生的半透明灰色遮罩
ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設置為0就可以去除半透明灰色遮罩。
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
14、 關閉iOS輸入自動修正
和英文輸入默認自動首字母大寫那樣，IOS還做了一個功能，默認輸入法會開啟自動修正輸入內容，這樣的話，用戶經常要操作兩次。如果不希望開啟此功能，我們可以通過input標簽屬性來關閉掉：
<input type="text" autocorrect="off" />
15. 禁止文本縮放
當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：
html {-webkit-text-size-adjust: 100%;}
需要註意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 ‘meta viewport’。
16、移動端禁止選中內容
如果你不想用戶可以選中頁面中的內容，那麽你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
17、如何禁止保存或拷貝圖像（IOS）
- 通常當你在手機或者pad上長按圖像 img ，會彈出選項 存儲圖像 或者 拷貝圖像，如果你不想讓用戶這麽操作，那麽你可以通過以下方法來禁止：
img { -webkit-touch-callout: none; } - 移動端定義字體
18、三大手機系統的字體：
ios 系統
默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體
android 系統
默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體
winphone 系統
默認中文字體是Dengxian(方正等線體)
默認英文和數字字體是Segoe
無微軟雅黑字體
各個手機系統有自己的默認字體，且都不支持微軟雅黑 如無特殊需求，手機端無需定義中文字體，使用系統默認 英文字體和數字字體可使用 Helvetica ，三種系統都支持。
19、webkit表單元素的默認外觀怎麽重置
.css{-webkit-appearance:none;}
20、消除transition閃屏
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
設計高性能CSS3動畫的幾個要素
a、盡可能地使用合成屬性transform和opacity來設計CSS3動畫，
b、不使用position的left和top來定位
c、利用translate3D開啟GPU加速
21、工具推薦
1）. 移動端基礎框架
zepto.js 語法與jquery幾乎一樣，會jquery基本會zepto~
iscroll.js 解決頁面不支持彈性滾動，不支持fixed引起的問題~ 實現下拉刷新，滑屏，縮放等功能~
underscore.js 該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。
fastclick 加快移動端點擊響應時間
animate.css CSS3動畫效果庫
2）. 滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js iSlider.js fullpage.js swiper
3）. 瀑布流框架
masonry
4）. 其他工具推薦
caniuse 各瀏覽器支持html5屬性查詢
paletton 調色搭配
web移動開發小貼士