移動端視口設置 viewport

時間 2021-01-20 標籤移動視口 viewport width device-width

提示：這裏使用的測試工具是Chrome，老版本的Chrome，有的同學沒見過這個，其實就是Chrome瀏覽器，

如果有需要，可以留個郵箱；

-----------------------------------------------------------

先來看看第一個參數：

   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width"> 
 

width=device-width width 設置的是viewport的寬度，這裏設置 width=device-width 的意思是視口和我們的

移動設備的寬度是一樣的，效果如下：這裏測試用的是蘋果4的屏幕，320的寬度，內容是剛好鋪滿屏幕的；

我們再換一個蘋果6plus：414的寬度同樣是鋪滿屏的，也就是適應屏幕的寬度；

我們假設這裏指定width=414，那麼在蘋果6plus下面顯示是正常的，但是到了蘋果4下面顯示就不正常了，

視口寬度414>320 ,就會出現視口橫向超出了，下面的效果：

所以說，進行移動端的頁面的開發的時候，我們需要適配不同的屏幕，這裏設置width=device-width,

第二個參數： initial-scale=1.0

   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width,initial-scale=1.0"> 
 

這裏的 initial-scale 設置頁面的初始縮放比例，也就是頁面的一開始加載出來的時候的頁面的縮放比例；

一般情況下我們就是不縮放， initial-scale=1.0 ,也就是正常顯示；

我們看看縮放比爲1.5的情況下的情形：可以看出放大了

第三個參數：maximum-scale=1.0 設置最大可以縮放的比例；

minimum-scale=1.0 設置最小的可以縮放的比例；

    < 
   meta 
   name= 
   "viewport" 
   content= 
   "width=device-width,initial-scale=1.5,maximum-scale=1.0, 
   minimum-scale=1.0> 
  

第四個參數：user-scalable=no 設置用戶是否可以對頁面進行縮放；

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