1. 手機前端頁面尺寸
iPhone手機網頁的設計尺寸
iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI
安卓網頁的設計尺寸
320dp：一個普通的手機屏幕（240X320，320×480，480X800）
480dp：一個中間平板電腦像（480×800）
600dp：7寸平板電腦（600×1024）
720dp：10寸平板電腦（720×1280，800×1280）
ipad網頁的設計尺寸
iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI
以上是移動端的尺寸，單獨的如果某一個移動的網站的尺寸是沒有的，因為移動網站的一半情況是按照%比的尺寸 來自動適應屏幕的大小，或者也通過設置，iphone執行什麼尺寸，安卓情況執行什麼尺寸的。
2. PHP上傳圖片，前端展示大小統一問題
有兩種做法：
方法一：通過後台為圖片生成展示時需要的縮略圖。
在圖片上傳的時候，創建一個寬度為100，高度為120的真彩色圖像，並且將背景設置為透明，然後按照原始圖像比例，將原始圖像拷貝到這個真彩色畫布上，這里需要計算拷貝的圖像的大小，使圖像寬度不超過100，高度不超過120，並且位於真彩色畫布的正中間，那麼前台只需要顯示這個縮略圖就可以了。
方法二：通過CSS+JS實現。
利用JS代碼重新設置圖像的顯示大小，讓其按比例自動適應，寬度不超過100，高度不超過120，但是這個時候圖像不是位於正中間的，還需要使用CSS樣式對齊定位，讓它水平和垂直方向都居中。
3. 一般做網頁設計背景尺寸定多大
網頁的背景多大要看對網頁的要求的。
網頁設計標准尺寸：
1、800*600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。
2、1024*768下，網頁寬度保持在1002以內，如果滿框顯示的話，高度是612-615之間，就不會出現水平滾動條和垂直滾動條。
為了做到主題鮮明突出，要點明確，應該使配色和圖片圍繞預定的主題；調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。
專業的網頁設計，需要經歷以下幾個階段：
需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。
以業務目標為中心進行功能策劃，製作出欄目結構關系圖。
以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。
以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
根據用戶反饋，進行頁面設計調整，以達到最優效果。
以上內容參考：網路-網頁設計
4. web前端怎麼讓div大小剛好和圖片一樣大
在前端開發過程中，我們經常會遇到盒子大小跟圖片尺寸不匹配的情況，我們通常會通過以下幾種方式來解決。
1.通過採用裁剪圖片，根據div盒子設置的寬、高，來更改裁剪圖片的尺寸，使圖片適配div盒子。
2.設置div的具體寬高，圖片寬高分別設置為100%，代碼具體如下width:100%;height:100%。這種方式，也可以將圖片大小填充滿盒子。
3.如果圖片是網頁背景圖片，還可以通過設置div盒子內屬性background-size為cover，這種方式也可使圖片充滿盒子。
我們在實際運用中，可以根據不同情況來選擇不同圖片調整方式。
5. 移動端網頁設計尺寸標准
涉移動端設計和開發的同學們，基本都會在尺寸問題上糾結好一陣子才能摸到頭緒。那麼大家知道移動端網頁設計尺寸標準是多少呢?下面一起來看看!
現象
首先說現象，大家都知道移動端設備屏幕尺寸非常多，碎片化嚴重。尤其是Android，你會聽到很多種解析度：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640x960, 640x1136, 750x1334, 1242x2208。
不要被這些尺寸嚇倒。實際上大部分的app和移動端網頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規律可循。
像素密度
要知道，屏幕是由很多像素點組成的。之前提到那麼多種解析度，都是手機屏幕的實際像素尺寸。比如480x800的屏幕，就是由800行、480列的像素點組成的。每個點發出不同顏色的光，構成我們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。剛好兩倍，然而兩款手機都是3.5英寸的。
所以，我們要引入最重要的一個概念：像素密度，也就是PPI(pixels per inch)。這項指標是連接數字世界與物理世界的橋梁。
Pixels per inch，准確的說是每英寸的長度上排列的像素點數量。1英寸是一個固定長度，等於2.54厘米，大約是食指最末端那根指節的長度。像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因為它的像素密度翻了一倍。
倍率與邏輯像素
再用iPhone 3gs和4s來舉例。假設有個郵件列表界面，我們不妨按照PC端網頁設計的思維來想像。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會變得特別寬。但兩款手機其實是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會小到根本看不清字。
在現實中，這兩者效果卻是一樣的。這是因為Retina屏幕把2x2個像素當1個像素使用。比如原本44像素高的頂部導航欄，在Retina屏上用了88個像素的高度來顯示。導致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質卻更清晰。
在以前，iOS應用的資源圖片中，同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片准備好，iOS會自己判斷用哪張，Android道理也一樣。
由此可以看出，蘋果以普通屏為基準，給Retina屏定義了一個2倍的倍率(iPhone 6plus除外，它達到了3倍)。實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。
Android的解決方法類似，但更復雜一些。因為Android屏幕尺寸實在太多，解析度高低跨度非常大，不像蘋果只有那麼幾款固定設備、固定尺寸。所以Android把各種設備的像素密度劃成了好幾個范圍區間，給不同范圍的設備定義了不同的倍率，來保證顯示效果相近。像素密度概念雖然重要，但用不著我們自己算，iOS與Android都幫我們算好了。
如圖所示，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有的Android屏幕都找到了自己的位置，並賦予了相應的倍率：
ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]
各型號iPhone的倍率比較簡單，我們後面會講到。那麼Android手機那麼多，具體怎麼分?哪些手機是幾倍的倍率呢?我們先看一張表，這是友盟2014年10月到2015年03月的數據：
就目前市場狀況而言，各種手機的解析度可以這樣粗略判斷。雖然不全面，但至少在1年內都還有一定的參考意義：
ldpi 如今已絕跡，不用考慮
mdpi [320x480](市場份額不足5%，新手機不會有這種倍率，屏幕通常都特別小)
hdpi [480x800、480x854、540x960](早年的低端機，屏幕在3.5英寸檔位;如今的低端機，屏幕在4.7-5.0英寸檔位)
xhdpi [720x1280](早年的中端機，屏幕在4.7-5.0英寸檔位;如今的中低端機，屏幕在5.0-5.5英寸檔位)
xxhdpi [1080x1920](早年的高端機，如今的中高端機，屏幕通常都在5.0英寸以上)
xxxhdpi [1440x2560](極少數2K屏手機，比如Google Nexus 6)
自然地，以1倍的mdpi作為基準。像素密度更高或者更低的設備，只需乘以相應的倍率，就能得到與基準倍率近似的顯示效果。
不過需要注意的是，Android設備的'邏輯像素尺寸並不統一。比如兩種常見的屏幕480x800和1080x1920，它們分別屬於hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320x533和360x640。很顯然，後者更寬更高，能顯示更多內容。所以，即使有倍率的存在，各種Android設備的顯示效果仍然無法做到完全一致。
單位
不難發現，真正決定顯示效果的，是邏輯像素尺寸。為此，iOS和Android平台都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。說實話，兩者其實是一回事。
單位之間的換算關系隨倍率變化：
1倍：1pt=1dp=1px(mdpi、iPhone 3gs)
1.5倍：1pt=1dp=1.5px(hdpi)
2倍：1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
3倍：1pt=1dp=3px(xxhdpi、iPhone 6)
4倍：1pt=1dp=4px(xxxhdpi)
單位決定了我們的思考方式。在設計和開發過程中，應該盡量使用邏輯像素尺寸來思考界面。設計Android應用時，有的設計師喜歡把畫布設為1080x1920，有的喜歡設成720x1280。給出的界面元素尺寸就不統一了。Android的最小點擊區域尺寸是48x48dp，這就意味著在xhdpi的設備上，按鈕尺寸至少是96x96px。而在xxhdpi設備上，則是144x144px。
無論畫布設成多大，我們設計的是基準倍率的界面樣式，而且開發人員需要的單位都是邏輯像素。所以為了保證准確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標注圖還是在日常溝通中。不要再說「底部標簽欄的高度是96像素，我是按照xhdpi做的」這樣的話了。
Web怎麼辦
移動端頁面的絕對單位仍然是px，至少代碼里這么寫，但它的道理也和app一樣。由於像素密度是設備本身的固有屬性，它會影響到設備中的所有應用，包括瀏覽器。前端技術可以善加利用設備的像素密度，只需一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面。根據像素密度，按相應倍率縮放。
以iPhone 5s為例，屏幕的解析度是640x1136，倍率是2。瀏覽器會認為屏幕的解析度是320x568，仍然是基準倍率的尺寸。所以在製作頁面時，只需要按照基準倍率來就行了。無論什麼樣的屏幕，倍率是多少，都按邏輯像素尺寸來設計和開發頁面。只不過在准備資源圖的時候，需要准備2倍大小的圖，通過代碼把它縮成1倍大小顯示，才能保證清晰。
實際應用
大家最關心的還是實際運用，畫布該怎麼設置。我們就iOS、Android、Web三個平台來分別梳理一下。不過在這之前，我要為使用PS進行設計的朋友介紹一個小技巧。
之前我說過，我們要以邏輯像素尺寸來思考界面。體現到設計過程中，就是要把單位設置成邏輯像素。打開PS的首選項——單位與標尺界面，把尺寸和文字單位都改成點(Point)。這里的點也就是pt，無論設計iOS、Android還是Web應用，單位都用它。當然，各平台單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。
要調節倍率，則通過圖像大小里的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識大家都知道，屏幕上的設計DPI設成72，印刷品設計DPI設成300。為什麼是這兩個數字?
首先說300，這和人眼的分辨能力有關。由於1英寸是固定長度，每1英寸有多少個像素點決定了畫質清晰程度。之前說過，這就是像素密度，也就是DPI。DPI達到300以上，其細膩程度就會給人真實感，像真實世界中的物件。相反，DPI只有10的話，在你一個食指指節大小的長度內只有10個像素，這明顯就是馬賽克了。所以印刷品要設成300，才能保證清晰。
再說72，這有一定的歷史原因。最早的圖形設計是在mac電腦上進行的，mac本身的顯示器解析度就是72。PS中把圖像DPI也設成72，就能保證屏幕上顯示的尺寸和列印尺寸相同，便於設計。72的PC顯示器解析度逐漸成為一種默認的行業標准，這套規則就這么沿用下來。
現在回到正題，我們怎麼通過DPI來調節倍率?既然屏幕本身的解析度是72，DPI設成72剛好是1倍尺寸，那設成72的兩倍就是倍率為2的屏幕了，就這么簡單。
下面來看看3個平台各自的畫布設置：
iPhone
iPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實是讓人很頭疼的事情。如果想用一套設計涵蓋所有iPhone，就要選擇邏輯像素折中的機型。
從市場佔有率數據來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320x568。上升勢頭最猛，未來有望登上第一的是iPhone 6的屏幕。倍率為2，邏輯像素375x667。
按照這兩種尺寸來設計，都是比較主流的做法。可以兼顧短一些的iPhone 4s，大一點的6 plus也不會過於空曠。
不過在切圖的時候要注意，由於iPhone 6 plus的3倍圖是由2倍圖放大而來，所以點陣圖要注意保證清晰。
Android
都說Android碎片化嚴重，但它現在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經趨於統一了：360x640，就看你設成幾倍了。想以xhdpi為准，就把DPI設成72x2=144。想以xxhdpi為准，就把DPI設成72x3=216。
對於那些比較老的低端機，寬度是480px的那批，畫面確實會小一些，顯示內容會更少。稍微留意一下，重要內容盡量保持在界面中上部分。
當然，這些機型不出一年就會被邊緣化，基本淘汰。現在能運轉的也是當作功能機在用，軟體多了必卡無疑，用戶體驗無從談起。不作考慮也是OK的。
Web
手機端網頁就沒有統一標准了，比較流行的做法是按照iPhone 5的尺寸來設計。倍率2，邏輯像素320x568。
這樣的做法比較實在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面載入速度快。當然，缺點就是在倍率3的設備上看，圖片不是特別清晰。
如果追求圖片質量，願意犧牲載入速度，那麼可以按照最大的屏幕來設計。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414x736。
總結
移動端的尺寸比PC端復雜，關鍵就在倍率。但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設計適應各種屏幕。站在這條水平線的角度看，會發現它很好理解。
6. 前端10mb是多大的圖片大嗎
10mb只是這個圖像文件的大小，不能確定這個圖片的尺寸大小 因為圖片格式不同大小也會不一樣，在就是該圖片是否壓縮過，那大小也會相差很多。
7. h5頁面製作，設計多大的尺寸，怎麼和前端適配，實現設計的視覺稿效果
H5的頁面製作設計尺寸是有一定規范的，正常的話是考慮手機的適配問題，所以這個尺寸的話是基於手機來做的。
具體是多少呢？因為手機的尺寸是不一樣的，特別是在比例上，這就要求我們在不同的手機上必須要保證內容的呈現，一定是完整的，但自己要考慮一個問題，要把內容分為重要的和不重要，重要的是什麼呢，比如說背景圖；重要的話就是放一些文字信息等等。
這樣就劃分了一個安全區和出血區，出血區和安全區交界的部分，就是不重要的，可以在各位手機上被裁掉的或者用來遮住手機頁面背景的；但是安全的內容，是可以保證在任何大小屏幕手機上都可以完整顯示。
一般安全區內框的尺寸是375X603PX，但在製作上又是另外一回事了，作鋪滿內框的圖要按照這個尺寸的2倍大小去做。
出血區也就是外框尺寸是422X748PX，作鋪滿外框的圖要按照這個尺寸的2倍大小去做。
這個你可以參考下意派Epub360的畫布標准，這個工具是專業級的H5工具。
8. 移動端的h5頁面的尺寸是多少
近來，大尺寸手機屏幕日趨主流，意派Epub360根據對主流大屏的計算，現新增大尺寸手機屏幕的畫布，並命名為「微信Plus」。原來的普通微信尺寸將繼續保留。
內容安全區：375*603（750*1206）
出血區：422*748（844*1496）
左右邊框各：23.5px
上下邊框各：72.5px
根據該畫布，後續將會推出配套的layer組件等尺寸，即當選擇使用該微信尺寸時，layer畫布跟layer容器尺寸自動默認尺寸：375X603PX，方便調整。
9. web前端，一張圖片的實際尺寸為1334×662，屏幕解析度比這張圖片還高，前端如何設計鋪滿整個屏幕的
一般是這樣的，
假設屏幕和圖片寬度比 大於高度比 應該設置圖片高度為屏幕高度，然後寬度等比拉伸並且居中；
假設屏幕和圖片寬度比 小於高度比 應該設置圖片寬度為屏幕寬度，然後高度等比拉伸並且居中；
10. 前端基礎：viewports理解、頁面各種寬度理解
關於viewports以前一直都是知道個大概但是一直沒有詳細去了解，加上最近在項目中遇到了比較近點的1像素問題，就乘著這個機會再加深一下印象回顧一下基礎。
screen.width/height
含義：用戶的屏幕的完整大小。
度量：設備的pixels。
意思就是用戶屏幕的物理寬度，它們的值不會隨著用戶的縮放而改變：它們是顯示器的特徵，而不是瀏覽器的特徵。換句話說是屏幕出廠的時候就決定了的
window.innerWidth/Height
含義：包含滾動條尺寸的瀏覽器完整尺寸
度量：CSS的pixels
document.documentElement.clientWidth/Height
含義：viewport尺寸：瀏覽器窗口尺寸。
度量：CSS的pixels
隨瀏覽器大小變化而變化，但寬度不包含滾動條寬度。具體請看圖一比較兩者的差別。
viewport的功能在於控制你網站的最高塊狀（block）容器：<html>元素。怎麼理解這句話呢？
假設定義了一個可變尺寸的布局（liquid layout），且你定義一個側邊欄的寬度為width: 10%。當你改變瀏覽器窗口大小時，該側邊欄會自動擴張和收縮。這是什麼原理呢？
技術上講，原理是側邊欄的寬度為它父元素寬度的10%，我們設它的父元素是body，且你未指定寬度。那麼問題就變為了<body>的寬度到底是多少？
通常，一個塊級元素佔有起父元素的100%的寬度（這里有異常情況，暫時忽略）。所以<body>的寬度就是其父元素<html>的寬度。
那麼<html>元素到底有多寬？
<html>的寬度受viewport所限制，<html>元素為viewport寬度的100%。,因為它的寬度恰好為瀏覽器的寬度。所以你的側邊欄寬度width: 10%會佔用10%的瀏覽器寬度。
反過來，viewport是嚴格的等於瀏覽器的窗口：定義就是如此。viewport不是一個HTML的概念，所以你不能通過CSS修改它。它就是等於瀏覽器窗口的寬度高度 –—— 在桌面瀏覽器上如此，移動設備瀏覽器上有點復雜。
注意：當我們設置html上面手動的設置了寬度，在那種情況下document. documentElement. clientWidth/Height依然給出了viewport的尺寸，而不是<html>元素。
比如 我手動設置html的樣式為
html {width：2000px;height: 2000px;}
通過document. documentElement. clientWidth/Height 獲取到的值只會是viewport的大小，而不是html元素的大小 2000px;
所以document. documentElement. clientWidth/Height只會給出viewport的尺寸，而不管<html>元素尺寸如何改變。
document. documentElement. offsetWidth/Height
含義：<html>的尺寸
度量：CSS的pixels
如果clientWidth/Height一直用以標示viewport的尺寸，我們該如何去獲取<html>元素的尺寸呢？通過document.doucmentElement.offsetWidth/Height來獲取html的寬度。
像上面的那個例子，這個就會返回2000px;
含義：頁面的移位
度量：CSS的pixels
window.pageXOffset 和 window.pageYOffset，定義了頁面(document)的相對於窗口原點的水平、垂直位移。因此你能夠定位用戶滾動了多少的滾動條距離.
對應viewport我們現在普遍理解為兩種視圖:
1.visualviewport：window.innerWidth/Height定義 包含滾動條
2. layoutviewport: document.documentElement.clientWidth/Height 不包含滾動條
在理解這兩種viewport之前，我們先認識理解這幾個名詞的意思：首先我們要記住： 1 px 就一個像素點
iphone 默認viewport 是980
vw：是Viewport's width的簡寫,1vw等於window.innerWidth的1%
vh：和vw類似，是Viewport's height的簡寫，1vh等於window.innerHeihgt的1%
vmin：vmin的值是當前vw和vh中較小的值
vmax：vmax的值是當前vw和vh中較大的值
1. 像素密度 ：每英寸可以顯示的像素點的數量，像素密度越大，表示在同樣的尺寸裡面，像素點越多
比如：iphone 3 的屏幕像素是320x480,iphone4s的屏幕像素是640x960，剛好兩倍，然而兩款手機都是3.5英寸的。
1英寸是一個固定長度，等於2.54cm。 像素密度越高，代表屏幕顯示效果越精細。 Retina屏比普通屏清晰很多，就是因為它的像素密度高。
2.像素： 可以分為物理像素和CSS像素
物理像素（device independent pixels ）： 物理像素也叫設備像素，任何設備的物理像素是固定不變的。比如我的筆記本的解析度是1366 * 765，表示的就是寬度上最多容納1366個物理像素點，高度上最多容納765個物理像素點
CSS像素（CSS pixels ）：CSS像素也叫邏輯像素，是為web開發創造的。通常情況下，在桌面端，CSS像素的大小和設備像素的大小是相等的，即一個CSS像素完全覆蓋了一個設備像素。如下圖
但是在手機端，我們都知道網頁可以通過手指進行縮放，這時候CSS像素也會改變
縮小操作 ：當用戶進行縮小操作時，一個物理像素覆蓋了多個CSS像素。圖中深藍色表示物理像素，半透明的淺藍色表示CSS像素
當用戶進行放大操作時，一個CSS像素覆蓋了多個物理像素 ： 這里的一個css像素就不在等於一個物理像素了。當縮小兩倍的時候，兩個css像素相當於一個物理像素。
DPR
DPR（devicePixelRatio）指的是設備像素比，即網頁在不進行縮放使，設備像素和CSS像素的比值
DPR = 設備像素 / CSS像素(某一方向上)
從iphone4開始，蘋果公司推出了retina視網膜屏幕，這種技術在屏幕大小不變的情況下，屏幕像素密度提高了一倍，解析度自然也提高了一倍，於是DPR等於2
通過JS的screen.width和screen.height屬性，可以獲取屏幕的CSS像素
通過JS的window.devicePixelRatio屬性，可以獲取屏幕的DPR值
以iphoneX為例，css像素（設備獨立像素）為375px * 812px，DPR是3，可以計算出設備像素（物理像素）是1125px * 2436px
屏幕解析度
屏幕解析度就是設備像素，一般以縱向像素 * 橫向像素來表示解析度。比如iphoneX的設備像素是1125px * 2436px，解析度也就是1125px * 2436px
在不同的屏幕上，CSS像素所呈現的物理尺寸是一致的，而不同的是CSS像素所對應的物理像素具數是不一致的。在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的卻是4個物理像素（某一方向上相當於1個css像素對應2個物理像素。）。
比如：
在普通屏中 我設置一個div的樣式 width：100px ( 100px=100個物理像素。) ，當我將這個樣式放在了Retina的屏幕（dpr=2）上的時候，發現變的更加清晰了。這是我們由於兩個屏幕的像素密度不一樣的結果，後者的像素密度是前者的兩倍，所以在100px的css像素中的距離裡面就存在了200個物理像素。但是兩個展現的效果是一樣的（CSS像素所呈現的物理尺寸是一致的。）,只是裡面的像素點的數量不同。
同時：visualviewport還是顯示100px 但是對於layoutviewport來說就相當於200px。 因為layoutviewport表示的是物理像素。
但是對於圖片來說：
在普通屏幕下，1個點陣圖像素對應著1個物理像素，圖片可以完美的顯示。可是在retina屏幕下，1個點陣圖像素對應著4個物理像素，由於點陣圖像素不可以再分割，所以圖片就會只能就進取色，導致圖片模糊。
如何來處理這個問題呢。比如一個200 x 300的圖片，如果想在retina屏幕上清晰顯示的話，就要提供一個400 x 600的2倍圖片（@2x），這樣的話，1個點陣圖像素就會對應上retina屏上的1個物理像素。圖片就不會模糊啦。
說明：retina屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個。
在高清顯示屏中的點陣圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍。那麼，前端的應對方案是：設計稿切出來的圖片長寬保證為偶數，並使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為：200px*200px，那麼寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px
.css{font-size:20px}
initial-scale這個縮放初始值是相對於設備的idea viewport的值進行縮放的，也就是說
<meta name="viewport" content="initial-scale=1">
//等效於
<meta name="viewport" content="width=devive-width"
//兩者各有一個bug，所以生產時最好將兩個一起寫上
但如果同時出現width和initial-scale
<meta name="viewport" content="width=500, initial-scale=1">
並不是根據先後順序比較，而是通過誰大取誰，比如設備是iphone5，idea viewport是320px，則此時initial-scale=1(320px)，所以此時viewport取width=500
關於initial-scale縮放的默認值以及其理論
visual viewport寬度 = idea viewport寬度 / 當前設置的縮放值
當前縮放值 = idea viewport寬度 / visual viewport寬度
註：這個理論不適合安卓原生瀏覽器
參考文章：
再聊移動端頁面的適配： https://www.w3cplus.com/css/vw-for-layout.html 閱讀碼：475709
使用Flexible實現手淘H5頁面的終端適配： https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.htm l 閱讀碼：487741
viewports剖析 https://www.w3cplus.com/css/viewports.html
移動web開發-理解設備像素、CSS像素、DPR - 羊先生
解惑好文：移動端H5頁面高清多屏適配方案 - CocoaChina_一站式開發者成長社區