1.什麼是視口?
視口簡單理解就是可視區域大小我們稱之爲視口
在PC端，視口大小就是瀏覽器窗口可視區域的大小（窗口多大，可視區域/視口就多大）
在移動端, 視口大小並不等於窗口大小, 移動端視口寬度被人爲定義爲了980
2.爲什麼是980而不是其他的值?
因爲過去網頁的版心都是980
喬布斯爲了能夠讓網頁在移動端完美的展示, 所以將iOS手機視口的大小定義爲了980
後來谷歌也覺得這是一個非常牛X的方案, 所以Android手機的視口也定義爲了980
3.移動端自動將視口寬度設置爲980帶來的問題——內容被縮小
雖然移動端自動將視口寬度設置爲980之後讓我們可以很完美的看到整個網頁
但是由於移動端的物理尺寸(設備寬度)是遠遠小於視口寬度的
所以爲了能夠在較小的範圍內看到視口中所有的內容, 那麼就必須將內容縮小
4.如何保證在移動端不自動縮放網頁的尺寸?——視口大小同可視區域大小
通過meta設置視口大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width 設置視口寬度等於設備的寬度
- initial-scale=1.0 初始縮放比例, 1不縮放
- maximum-scale：允許用戶縮放到的最大比例
- minimum-scale：允許用戶縮放到的最小比例
- user-scalable：用戶是否可以手動縮放，手指縮放
注意點：以上屬性有可能在模擬器上無用，需要真機測試