導讀:建站知識建站知識說起移動web的開發，我們不得不提起viewport。想要在移動設備上進行網頁的重構或開發，首先得搞明白移動設備上的viewport，只有明白了viewportseo網站排名優化軟件贏卡購網站建設。

說起移動web的開發，我們不得不提起viewport。想要在移動設備上進行網頁的重構或開發，首先得搞明白移動設備上的viewport，只有明白了viewport的概念以及弄清楚與其有關的meta標簽的使用，才能更好的讓我們的網頁適配或響應各種不同分辨率的移動設備。一、移動端適配的目的我們在PC端訪問到的頁面一般是正常顯示的，默認是不會被縮放的，除非是手動進行了縮放，頁面才會被放大比例或者是縮小比例顯示。但是在移動端就不一樣了，如果將一個pc端的頁面放到手機端進行訪問，那么可能出現頁面擠到一起、布局錯亂或者出現橫向滾動條的情況，我們給用戶帶來不好的體太原網站制作優化seo公司驗。還有在屏幕尺寸大小不同的手機上進行訪問頁面時，頁面顯示的效果不能合理的展示，我們期望的是在手機屏幕較大時顯示的內容比較大一些，手機屏幕小的時候頁面的內容也會縮小進行自適應。因此，移動端適配的目的是在不同尺寸的設備上，頁面達到合理的展示（自適應）或者說是能夠保持統一效果。二、viewport如何理解通常viewport是指視窗，瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域。在移動端和pc端視窗是不同的，pc端的視窗是瀏覽器窗口區域，而在移動端有三個不同的視窗概念：布局視窗、視覺視窗、理想視窗。1）布局視窗（layout viewport）如果把移動設備上瀏覽器的可視區域設為viewport的話，某些網站會因為viewport太窄而顯示錯亂，所以這些瀏覽器就默認會把viewport設為一個較寬的值，比如980px，使得即使是那些為PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。這個瀏覽器默認的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。2）視覺視窗（visual viewport）layout viewport的寬度是大于瀏覽器可視區域的寬度的，所以還需要一個viewport來代表瀏覽器可視區域的大小，這個viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。3）理想視窗（ideal viewport）ideal viewport是一個能完美適配移動設備的viewport。首先，不需要縮放和橫向滾動條就能正常查看網站的所有內容；其次，顯示的文字、圖片大小合適，如14px的文字不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，無論是在何種密度屏幕與分辨率下，顯示出來的大小都差不多。這個viewport叫做 ideal viewport。ideal viewport并沒有一個固定的尺寸，不同的設備有不同的ideal viewport。例如，所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，針對ideal viewport 而設計的網站，不需要縮放和橫向滾動條都可以完美地呈現給用戶。為了理解起來更清楚一點，在網上找了兩張比較易懂的圖片。如果對這三個視窗的概念還不是很清楚，看看下面幾張圖可能就會一目了然：布局視窗

關鍵詞標簽: 使用方法 原理 viewport