將pc端的網頁自適應顯示在移動端

  當我們將一個pc端的網頁放到移動端的時候,移動端瀏覽器會將pc端的網頁按照一定的比例完整的顯示出來,這是因爲移動端的瀏覽器默認的會將網頁渲染在一個比例比較大的viewport中排版(ios默認的是980px,Android4.0以上爲980px),然後通過比例縮放看到整個頁面的全貌。
  但是,使用默認的viewport佈局會有以下缺點:

  • 寬度不可控制,不同系統不同設備的默認值可能不同
  • 頁面縮小版顯示,交互不友好
  • 鏈接不可點
  • 有縮放,縮放後又有滾動

所以,我們可以通過meta標籤改變viewport得到移動端網頁定製化自適應的一個效果。

<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">

meta標籤中參數的設置和含義如下:

  • width=device-width:表示佈局viewport的值是設備的寬度(也可以是特定的viewport值)
  • initial-scale=1.0: 設置頁面的初始縮放比例
  • minimun-scale=1.0: 設置頁面的最小縮放比例
  • maximum-scale=1.0:設置頁面的最大縮放比例
  • user-scalable=no: 設置用戶是否可以縮放操作

通過以上meta標籤的設置,就可以將一個pc端的網頁自適應的顯示在移動端了,而以上的參數設置也是我們移動端開發的最常用設置。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章