最近在做一個頁面時，發現在 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" />// 取消數字被識別為電話號碼，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2383.html
標籤：Html/Css
下一篇：Jquery之影片