最近在做一個頁面時，發現在 iPad 的 Safari 瀏覽器中背景顯示不全，定位到該 div 後發現所指定 css 的寬度為 100% ； 到百度搜索後發現，safari 中 viewport 預設寬度為 980px，若事先未指定其初始 viewport 寬度，則會預設按照 980px 處理。 可 ...
最近在做一個頁面時，發現在 iPad 的 Safari 瀏覽器中背景顯示不全，定位到該 div 後發現所指定 css 的寬度為 100% ；
到百度搜索後發現，safari 中 viewport 預設寬度為 980px，若事先未指定其初始 viewport 寬度，則會預設按照 980px 處理。
可以預設初始化 viewport 寬度或在 css 中設定 min-width，但最簡單的方法可以在 head 標簽中初始化好 viewport。
在設置viewport前先來介紹一下html中viewport：
移動設備上的viewport是設備屏幕上用來顯示網頁的那部分區域，再具體一點就是瀏覽器上用來顯示網頁的那部分區域，但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。在預設情況下，移動設備上的viewport都是大於瀏覽器可視區域的，這是因為移動設備的解析度相對於PC來說都比較小，所以為了能在移動設備上正常顯示那些為PC瀏覽器設計的網站，移動設備上的瀏覽器都會把自己預設的viewport設為980px或1024px（也可能是其它值，由設備本身決定），但後果是瀏覽器出現橫向滾動條，因為瀏覽器可視區域的寬度比預設的viewport的寬度小。
viewport分為三種：
（1）layout viewport（佈局視窗）
layout viewport是網頁佈局的區域，它是<html>元素的父容器。只要你不在css中修改<html>元素的寬度，<html>元素的寬度就會撐滿layout viewport的寬度。
很多時候瀏覽器視窗沒有辦法顯示出layout viewport的全貌，但是它確實是已經被載入出來了，這個時候滾動條就出現了，你需要通過滾動條來瀏覽layout viewport其他的部分。
layout viewport用css像素來衡量尺寸，在縮放、調整瀏覽器視窗的時候不會改變。縮放、調整瀏覽器視窗改變的只是visual viewport。
在桌面瀏覽器中，縮放為100%的時候，Layout Viewport寬度等於內容視窗的寬度。（你幾乎不會在電腦上見過橫向滾動條，除非你調整縮放）
但是在移動端，縮放為100%的時候，Layout Viewport不一定等於內容視窗的大小。當你用手機瀏覽瀏覽寬大的網頁（這些網頁沒有採用響應式設計）的時候，你只能一次瀏覽網頁的一個部分，然後通過手指滑動瀏覽其他部分。這就說明整個網頁（Layout Viewport）已經載入出來了，只不過你要一部分一部分地看。
如果把移動設備上瀏覽器的可視區域設為viewport的話，某些網站會因為viewport太窄而顯示錯亂，所以這些瀏覽器就預設會把viewport設為一個較寬的值，比如980px，使得即使是那些為PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。這個瀏覽器預設的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。
（2）visual viewport（視覺視窗）
visual viewport就是顯示在屏幕上的網頁區域。通過前面的說明你應該已經知道visual viewport了：它往往只顯示layout viewport的一部分。visual viewport就像一臺攝像機，layout viewport就像一張紙，攝像機對準紙的哪個部分，你就能看見哪個部分。你可以改變攝像機的拍攝區域大小（調整瀏覽器視窗大小），也可以調整攝像機的距離（調整縮放比例），這些方法都可以改變visual viewport，但是layout viewport始終不變。
visual viewport用css像素來衡量尺寸，表示有多少個css像素能夠被用戶看到。
layout viewport的寬度是大於瀏覽器可視區域的寬度的，所以還需要一個viewport來代表瀏覽器可視區域的大小，這個viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。
舉個慄子：
為了讓小小的手機屏幕也能夠瀏覽寬大的網頁（這些網頁沒有採用響應式設計），手機瀏覽器將layout viewport的預設寬度設為與電腦瀏覽器一樣，比如980px，1024px（單位：CSS像素）。由於手機的屏幕邏輯像素寬度一般只有300~400邏輯像素，因此需要將多個css像素由1個邏輯像素顯示（也就是縮小，千萬不要忘記縮放比例=css像素邊長/邏輯像素邊長），讓手機屏幕顯示的css像素與網頁的css像素一樣多了，也就是visual viewport = layout viewport。
（3）ideal viewport（理想視窗）
ideal viewport是一個能完美適配移動設備的viewport。首先，不需要縮放和橫向滾動條就能正常查看網站的所有內容；其次，顯示的文字、圖片大小合適，如14px的文字不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，無論是在何種密度屏幕，何種解析度下，顯示出來的大小都差不多。這個viewport叫做 ideal viewport。
ideal viewport並沒有一個固定的尺寸，不同的設備有不同的ideal viewport。例如，所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640。
ideal viewport 的意義在於，無論在何種解析度的屏幕下，針對ideal viewport 而設計的網站，不需要縮放和橫向滾動條都可以完美地呈現給用戶。
下麵來介紹一下蘋果(Safari)瀏覽器的圖片width設置為100%但實際顯示為980px解決方法：
利用meta標簽對viewport進行控制
移動設備預設的viewport是layout viewport，，但在進行移動設備網站的開發時，需要的是ideal viewport。要得到ideal viewport，需要用到meta標簽。
head標簽中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。當然maximum-scale=1.0, user-scalable=0不是必需的，是否允許用戶手動播放根據網站的需求來定，但把width設為width-device基本是必須的，這樣能保證不會出現橫向滾動條。
meta viewport 的6個屬性：
| width | 設置layout viewport 的寬度，為一個正整數，或字元串"width-device" |
| initial-scale | 設置頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，為一個數字，可以帶小數 |
| height | 設置layout viewport 的高度，這個屬性並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
width能控制layout viewport的寬度，如果不指定該屬性，layout viewport將預設為980px或1024px（也可能是其它值，由設備本身決定），如果把layout viewport的寬度設置為移動設備的寬度，那麼layout viewport將成為ideal viewport。
其實，要把當前的viewport寬度設為ideal viewport的寬度，既可以設置width=device-width，也可以設置initial-scale=1，但有一個小缺陷，就是width=device-width會導致iphone、ipad橫豎屏不分，initial-scale=1會導致IE橫豎屏不分，都以豎屏的ideal viewport寬度為準。所以，最完美的寫法兩者都寫上去， initial-scale=1 解決 iphone、ipad的缺陷，width=device-width解決IE的缺陷。
viewport設置移動端自適應的方法：
<meta name="viewport" content="width=device-width, initial-scale=1">
最後還有倆個meta屬性也可以瞭解下：
<meta name="apple-mobile-web-app-capable" content="yes" /> // 設定iphone端頁面全屏 <meta name="format-detection" content="telephone=no" />// 取消數字被識別為電話號碼。
