正在挪動年夜潮云云澎湃狠惡的狀況下，正視挪動流量是必需的。而一個挪動友愛的站對用戶是合適閱讀，而對搜刮引擎去道則是恰當的標簽利用，讓他正在最短工夫內鑒別出它的挪動友愛性，從而脫穎而出。
尾先是meta標簽標示。和將腳機，挪動端，wap版等代表挪動的辭匯插進到網頁中頂部尾部和頁里中幾回，強化挪動頁里的辨認。專客園一篇文章以天貓淘寶京東為例做了詳解，我間接戴錄過去。開開本做者。
1、天貓
<title>天貓觸屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection">
2、淘寶
<title>淘寶網觸屏版</title> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no" name="format-detection"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta property="wb:webmaster" content="c51923015ca19eb1"> <meta name="author" content="m.taobao.com"> <meta name="copyright" content="Copyright ?m.taobao.com 版權一切"> <meta name="revisit-after" content="1 days"> <meta name="keywords" content=""> <meta name="description" content="">
3、京東
1 <title> 京東 - 腳機版 </title> 2 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> 3 <meta name="format-detection" content="telephone=no"> 4 <meta name="Keywords" content="腳機購物,WAP商鄉,日用百貨,3C家電,汽車用品">
4、網易
<title>腳機網易網</title> <meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <meta name="apple-itunes-app" content="app-id=425349261"> <meta name="apple-mobile-web-app-capable" content="yes">
5、百度
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no">
meta指元素可供給有閉頁里的元疑息(meta-information)，好比針對搜刮引擎戰更新頻度的形貌戰樞紐詞。 標簽位于文檔的頭部，沒有包羅任何內容。 標簽的屬性界說了取文檔相干聯的稱號/值對。
腳機端獨有的有哪些?
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection">
第一個meta標簽暗示：強迫讓文檔的寬度取裝備的寬度連結1:1，而且文檔最年夜的寬度比例是1.0，且沒有許可用戶面擊屏幕放年夜閱讀;
width - viewport的寬度 height - viewport的下度 initial-scale - 初初的縮放比例 minimum-scale - 許可用戶縮放到的最小比例 maximum-scale - 許可用戶縮放到的最年夜比例 user-scalable - 用戶能否能夠腳動縮放
第兩個meta標簽是iphone裝備中的safari公有meta標簽，它暗示：許可齊屏形式閱讀;
第三個meta標簽也是iphone的公有標簽，它指定的iphone中safari頂真個形態條的款式;
正在web app使用下形態條(屏幕頂部條)的色彩; 默許值為default(紅色)，能夠定為black(烏色)戰black-translucent(灰色半通明)。 留意：若值為“black-translucent”將會占有頁里px地位，浮正在頁里上圓 (會籠蓋頁里20px下度–iphone4戰itouch4的Retina屏幕為40px)。
第四個meta標簽暗示：報告裝備疏忽將頁里中的數字辨認為德律風號碼。
其次是百度對字號間距的劃定，需嚴厲服從。
百度用戶體驗部對挪動頁閱讀體驗的研討功效：
1、主體內容露文本段降時，注釋字號保舉14px，止間距保舉(0.42~0.6)*字號，注釋字號沒有小于10px，止間距沒有小于0.2*字號;
2、主體內容露多圖時，除圖片量量中，應設置圖片寬度分歧地位同一;
3、主體內容露多個筆墨鏈時，筆墨鏈字號保舉14px或16px：字號為14px時，縱背間距保舉13px;字號為16px時，縱背間距保舉14px;筆墨鏈團體可面地區沒有小于40px;
4、主體內容中的其他可面地區，寬度戰下度應年夜于40px;
5、別的，需留意交互分歧性，統一頁里不該利用不異腳勢完成差別功用。
再次，低落js，年夜圖片，flash等富媒體資本利用，以至正在非出格須要狀況下，利用雜靜態文本資本，會見速率快，主題集合，削減蜘蛛事情。用借是不消，能夠詳盡的表現到每一個頁里戰略上來，富媒體的工具不過是操縱人左腦功用強化影象，增強吸收力的。但正在挪動端，它會嚴峻拖緩減載速率和占用有限腳機空間。并不是很好挑選，除非對圖片請求及flash或交互請求下的站面，不外凡是它們的加快圓里有壯大的手藝撐持。可有用抵加帶去的倒霉影響。
第四，利用m.jiaodaseo.com，wap.jiaodaseo.com，相似那樣的通用標示屢次反復標示，并可接納手藝手腕回絕pc用戶會見。大概強迫跳轉到pc頁里。假如是自適配的，那種法子便沒有合用了，可增強上里提到的樞紐詞標示，刪進辨認度。
第五，百度的自界說標簽，用以協助辨認pc挪動站。
用去背百度蜘蛛闡明此url頁里合適正在PC端借是M端展示。道黑了，便是協助百度提交校驗辨認成果的準確性，削減百度蜘蛛把PC站當做M站，大概把M站當做PC站停止抓與。
2.代碼地位：
代碼放正在中心，劃定規矩戰對應干系睹下：
假如是PC站，代碼：<meta name="applicable-device"content="pc">
假如是M站，代碼：<meta name="applicable-device"content="mobile">
假如是自順應或代碼適配，代碼：<meta name="applicable-device"content="pc,mobile">。
總的一句話，速率快不變挪動會見體驗佳，搜刮引擎下度辨認，并能成立起挪動站跟pc站的逐個對應干系。
