螢幕尺寸相關觀念整理 - 南瓜派

螢幕尺寸換算(對角線尺寸簡易換算). 請輸入對角線尺寸: 吋或是輸入公制公分比例高度寬度4:3 公分公分5:4 公分公分16 ... GetstartedOpeninapp南瓜派SigninGetstarted1.3KFollowersAboutGetstartedOpeninapp螢幕尺寸相關觀念整理南瓜派Sep14,2017·10minread最近被太多尺寸單位搞得頭昏眼花，還有相同Resolution不同ScreenSize的呈現方式之類，加上自己目前半路出家要惡補東西太多，看完資料後把一些重點摘錄整理在這邊。

ScreenSize(螢幕尺寸)每個螢幕的物理尺寸有自己的長寬，通常用對角線來定義，也就是所謂的幾吋，也會有不同的比例，比如相同的對角線尺寸，但不同螢幕比例下長寬就會有差異，例如4:3/16:9/16:10…螢幕尺寸換算(對角線尺寸簡易換算)請輸入對角線尺寸:吋或是輸入公制公分比例高度寬度4:3公分公分5:4公分公分16:9公分公分16:10公分公分21:9公分公分LCD液晶螢幕的尺寸標示都是對角線，不同比例的螢幕長寬又都不相同，…bigboy2000.blogspot.tw你可以用這個連結來查詢真實的實體尺寸是多少，之前手邊沒有螢幕時會用這個在繪圖軟體畫出cm單位的圖印出來當實體參考。

注意，網頁的pixel跟APP的pixel意義不完全一樣Resolution(解析度)&DevicePixel(物理像素)顯示器Display表面是由無數小光點排列而成，稱為物理像素或像素點，簡稱px(devicepixel)；螢幕Resolution都是固定的，都是以寬度像素x長度像素個數表示，例如1920pxx1080px。

px是抽象相對的單位，不是絕對長度；舉例來說，24吋16:10的螢幕物理尺寸長寬分別是51.69cmx32.3cm，最高解析度可能是1920x1080px；但13吋MBP螢幕物理尺寸比較小，最高解析度卻也是1920x1080px。

物理尺寸不同，但Resolution可能沒差多少，這涉及到眼睛距離與成像品質的取捨ScreenDensity(螢幕密度)螢幕密度的定義是一個單位面積下的物理像素px個數，也就是將螢幕尺寸除以螢幕解析度，又因為螢幕尺寸是以對角線來表示，所以「螢幕密度」就是以「斜邊尺寸」除以「斜邊解析度(像素數)」，單位是ppi，也就是pixelperinch，而整個公式是：ScreenDensity=ResolutionofScreenSize/ScreenSizePPI={[(pxoflength)^2+(pxofwidth)^2]^(1/2)}/(inch)通常會看到兩個單位dpi&ppi；dpi大部分用於印刷，d=dot所謂的300dpi、150dpi、72dpi就是這個，但現在dpi&ppi在輸出上已經混用，尤其在illu。

iOSAPP開發單位：pt因為螢幕製造技術的提升，ScreenDensity可以進一步往上提高，也就是每一平方吋裡面塞的px可以變更多的時候，在原本的螢幕尺寸上作圖就會遇到換算不同設備時的困難。

舉例來說，iPhone3G的ScreenSize是3.5”，Resolution是320x480px，但iPhone4加入了螢幕retina技術後，Resolution是960x640px，但ScreenSize一樣是3.5”，所以如果介面同樣是做一張320x480px的圖片，放在iPhone，看起來會變成只有iPhone3螢幕裡的1/2大小。

物理尺寸一樣320x480，但ip4的螢幕密度是ip3的兩倍，也就是在同樣的Resolution物理尺寸下ip4是用了足足4倍的devicepixel來表現，相對來說就比較細膩為了避免這個在不同螢幕上大小不一致的問題，iOS在開發上重新定義了一個新單位：「pt(point)」，一個以螢幕密度為163ppi為基準的絕對物理單位，在iOS上溝通單位就可以用pt來取代px：1iOSpt=1/163inch也就是說，當我們在iOSapp作圖換算倍率時，其實是以iPhone3G為基礎來看待其他iOS的螢幕，那pt與px之間的關係是什麼？以上圖例子來說：whenitisdisplayedoniPhone3G:Density:[(480px)^2+(320px)^2]^(1/2)/(3.5inch)=(163px/inch)163ppi=163(px/inch),so1inch=163pt=163px,1pt=1pxwhenitisdisplayedoniPhone4:Denity:[(960px)²+(640px)²]^(1/2)/(3.5inch)=(326ppi)326ppi=326(px/inch),so1inch=163pt,1pt=2px但這邊要注意的是，iPhone3G時1pt=1px，但在2倍ppi的時候其實長寬都需要兩倍，因此1pt=2px其實指的是單向維度，實際上是原本1個pt需要一個px來填滿，現在1個pt需要4個px填滿，簡單來說：當163ppi下，1pt=1px，等於一個pt裡面可以放下一個pixel(1x1)當326ppi下，1pt=4px，等於一個pt裡面可以放下四個pixel(2x2)1pt在不同ppi情況下需要的px數量就會有差異看到這邊可以發現，devicepixel雖然是一個像素點，但實際上的“物理大小”是可以越縮越小，換句話說也就是面板製造技術越來越好，可以用更多pixel塞在同樣尺寸的螢幕裡面，也就是所謂高解析度。

Android的APP開發單位：DP同樣道理，不同的螢幕尺寸跟解析度也發生在Android上，所以一樣有一個替代單位dp來取代，不同的是dp是以160dpi為基準所換算，在不同dp密度下，一個在顯示結果上一樣“大小”的icon，實際上是由不同px製作而成。

以160dpi為基準是MDPI，1x，往上類推HDPI/1.5x、XHDPI/2x、XXHDPI/3x、XXXHDPI/4x製作上的建議為了要維持一定比例大小的圖，必須要用不同的px尺寸輸出圖片，最好方式還是以1x的基礎做圖，然後往上輸出成不同倍率的尺寸，讓工程師後續可以抓圖使用。

網頁上的開發單位：CSSpixel雖然它也叫做pixel，但實際上意義和前面設備上的像素點是截然不同的，而是由W3C所定義出來給瀏覽器Browser所使用的抽象單位，也就是另外一個以物理世界長度為基準的狀況下，會變動的單位。

在低解析度桌上型設備或筆電上，CSSpixel=devicepixel，也就是CSSpixel=px，但如果是在高解析度例如印表機或是行動裝置，就會有變化。

在程式設定下已經規定好，因此在網頁開發上通常不會看Resolution，而是看設備參考的device-width作為斷點的設定依據，例如底下連結，不過還是要問一下專業大大，但簡單說至少要做成三種尺寸給工程師去作。

ScreenSizes|ViewportSizesandPixelDensitiesforPopularDevicesScreensiz.esisahandydatabaseofscreensizes,viewportsizes,andpixeldensitiesforpopularsmartphones,tablets…screensiz.es在高密度的螢幕下，1px(CSSpixel)依舊可能會有多個物理像素(devicepixel)，在不同設備上會有不同的呈現差異，比如一張200x200的bitmap利用CSSpixel呈現在1x的螢幕上沒問題，每一個CSSpixel都能對應在1x的devicepixel；但在2x的螢幕上會需要用400x400個devicepixel來顯示，所以一個CSSpixel會有4個devicepixel來顯示，會取相同色塊填滿，顯示的結果就是高解析螢幕沒有表顯得比低解析度好。

處理方式1，利用高解析圖片做採樣處理如果使用高解析度圖片在網頁上呈現，經過CSS來處理後，在高解析度上可以呈現出原本該有的細膩細節，但在低解析度上透過CSS處理降低採樣，所以呈現品質相對就比較差（但螢幕本來就差，所以根本沒差），但問題是不管哪一種設備都會下載高解析圖片，變成下載大圖這件事很麻煩。

處理方式2，利用程式處理選擇不同尺寸圖片利用程式碼處理，不同倍率設備選擇不同倍率的圖片來處理，只是程式上需要多一些設定。

處理方式3，利用向量格式處理像是SVG檔案，通常用在logooricon這類相對不複雜的圖形，或是使用iconfonts來處理，這類就沒在這邊了。

總結：開發APP不管iOS或是Android，pixel都是devicepixel，不同倍率要有不同解析度圖片，配合iOSpt或是AndroidDP總結：開發WebPixel是CSSpixel，尤其是RWD以及不同screendensity的時候，要注意圖像優化跟viewport以及breakpoint，可以參考http://screensiz.es/裡面的device-width，而不是resolution補充：前端工程師蔡大大說，目前裝置已經可以處理時使用一致比例，所以在作圖時這部分其實還好，但圖片部分提供素材要比原本尺寸大個1.5倍左右其他實務上相關的觀念，有任何觀點也麻煩大家不吝賜教主要參考來源：https://read01.com/zh-tw/KB223k.html#.WbpICdMjHBL像素密度解密像素密度的運作原理，還有它如何影響你的設計。

intersection.tw5.3.2iOS尺寸单位pt、ppi与px之间换算关系单位：pt：ios开发单位，即point，绝对长度，1pt=1/72英寸。

ppi:PixelsPerInch，即每英寸所拥有的像素数目，屏幕像素密度。

公式：举例：比如iphone3gs的像素分辨...www.jianshu.com網頁和行動裝置介面設計的尺寸單位(一)理解不同尺寸單位pt、px、dpi之間的定義差別，實際應用的方式以及在CSS上渲染的影響。

medium.com網頁和行動裝置介面設計的尺寸單位(二)理解不同尺寸單位pt、px、dpi之間的定義差別，實際應用的方式以及在CSS上渲染的影響。

medium.com網頁和行動裝置介面設計的尺寸單位(三)理解不同尺寸單位pt、px、dpi之間的定義差別，實際應用的方式以及在CSS上渲染的影響。

medium.comiPhone尺寸繪製建議TheUltimateGuideToiPhoneResolutionsArticlesaboutPaintCode'snewfeatures,interviews,applicationdevelopmenttopics.www.paintcodeapp.comMaterialDesign上的手持裝置基本資料Devicemetrics-MaterialDesignAcomprehensivedesignguideforsizingandresolutionsacrossalldevices.material.io南瓜派設計從業員x福爾摩沙塔綠班路燈戰士Follow9898 98UIUXDesignProcessMorefrom南瓜派Follow設計從業員x福爾摩沙塔綠班路燈戰士