比較各大移動入口網站淘寶、京東、網易、新浪、騰訊meta標籤的異同
阿新 • • 發佈：2019-02-18
針對HTML5在移動端的迅猛發展，各大入口網站開始使用HTML5的標籤來針對手機網站進行重構，所以我找到了一些國內有代表性的網站例如淘寶、京東、以及四大門戶來比對一下他們在移動網站的meta標籤的異同。如果大家想看一下在手機端網站程式碼的話可以通過遠端除錯工具來進行檢視，具體操作方法：http://www.candoudou.com/archives/2311、首先先展示一下各個網站的有關meta標籤的程式碼：
程式碼累贅，會出現隱藏無用的元素，載入時間加長 其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果 一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況 現在先切回正題： 以上網站的相同點： <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/> meta標籤表示：強制讓文件的寬度與裝置的寬度保持1:1，並且文件最大的寬度比例是1.0，且不允許使用者點選螢幕放大瀏覽；尤其要注意的是cont ent裡多個屬性的設定一定要用分號+空格來隔開，如果不規範將不會起作用 所以一個簡單的移動網站的meta設定可以是這樣： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport"/> </head> <body> <h1>移動網站的meta設定</h1> </body> </html> 不同點： <meta content="telephone=no" name="format-detection"> meta標籤表示：告訴裝置忽略將頁面中的數字識別為電話號碼 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> 使用者將網頁收藏為書並加入到主畫面時，可以令最下的選單消失，令網頁為全螢幕 iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式 預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。 注意： 若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。這個主要是針對移動網站新增到快捷方式（新增到主螢幕）
網易
<meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport">新浪
<meta content="width=device-width,minimum-scale=1.0" id="vp" name="viewport"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no">騰訊
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="HandheldFriendly" content="true">搜狐
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="MobileOptimized" content="320">淘寶
<meta charset="utf-8"> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" 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 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> 以上是在安卓系統上獲取的移動網站上程式碼 現在針對移動平臺的網站大多采用響應式佈局 所謂響應式佈局： 響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。 響應式佈局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。 優點： 面對不同解析度裝置靈活性強 能夠快捷解決多裝置顯示適應問題 缺點： 相容各種裝置工作量大，效率低下程式碼累贅，會出現隱藏無用的元素，載入時間加長 其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果 一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況 現在先切回正題： 以上網站的相同點： <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/> meta標籤表示：強制讓文件的寬度與裝置的寬度保持1:1，並且文件最大的寬度比例是1.0，且不允許使用者點選螢幕放大瀏覽；尤其要注意的是cont ent裡多個屬性的設定一定要用分號+空格來隔開，如果不規範將不會起作用 所以一個簡單的移動網站的meta設定可以是這樣： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport"/> </head> <body> <h1>移動網站的meta設定</h1> </body> </html> 不同點： <meta content="telephone=no" name="format-detection"> meta標籤表示：告訴裝置忽略將頁面中的數字識別為電話號碼 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> 使用者將網頁收藏為書並加入到主畫面時，可以令最下的選單消失，令網頁為全螢幕 iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式 預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。 注意： 若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。這個主要是針對移動網站新增到快捷方式（新增到主螢幕）