web移動開發小貼士

標籤：cap   rip   沒有   手機   情況   顯示   hone   應對   hidden   

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還做了一個功能，預設IME會開啟自動修正輸入內容，這樣的話，使用者經常要操作兩次。如果不希望開啟此功能，我們可以通過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）

1. 通常當你在手機或者pad上長按映像 img ，會彈出選項 儲存映像 或者 拷貝映像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：
   img { -webkit-touch-callout: none; }
2. 移動端定義字型

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移動開發小貼士