如何處理移動設備中的不同分辨率（Retina和HD）？

我對不同的佈局有不同的CSS文件（Phone & Tablet）。由於我在平板視圖中添加了樣式，基於我在Samsung Note 8上獲得的視圖，分辨率爲1200x800。如何處理移動設備中的不同分辨率（Retina和HD）？

但是，當我運行三星Galaxy tab750這個應用程序與1920×1080分辨率，我得到較小的字體較小的佈局，因爲我已經調整了字體和佈局基礎上注8

，所以我得到的建議，添加另一個CSS文件來處理這個。接下來，當我們的質量檢查嘗試在iPad上運行應用程序時（Retina Display 2048x1536），第三個CSS甚至在其中仍然很小。

2012年，有一個2,560x1,600分辨率的平板電腦。 2013年，至少有六個。我懷疑我們會在2014年看到更多（http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw）。

對於這個帖子Responsive Web Design and high resolution displays (iPhone 4/5)的，

我們將使用媒體查詢所需的分辨率，

/* Large desktop */ 
@media (min-width: 1200px) { 
    font-size: 18px; 
} 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { 
    font-size: 16px; 
} 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 
    font-size: 14px; 
} 

/* Landscape phones and down */ 
@media (max-width: 480px) { 
    font-size: 12px; 
}

所以，我關心的是我們可以處理這種情況下，不會對添加越來越多的CSS去和媒體查詢，如果是的話，請建議。

來源

2013-12-19 Ashis Kumar

這取決於你試圖達到的設計。在網絡上，製作假設具體分辨率的佈局通常是一個壞主意 - 正如您已經注意到的那樣，互聯網可以並且將在具有* any *分辨率的設備上訪問。這是不可能的（也可能是Stack Overflow的主題）來告訴你一般如何設計適用於不同分辨率的佈局，但是如果你有關於你正在處理的佈局的具體問題，請告訴我們。 –

有檢測高密度/視網膜設備a number of media-query based ways。

我個人傾向於使用這個，這似乎捕捉到絕大多數設備：

@media screen and (-webkit-min-device-pixel-ratio: 2), 
    screen and (max--moz-device-pixel-ratio: 2), 
    screen and (min-device-pixel-ratio: 2) {}

完全看個人喜好，但！

請記住，大多數情況下，「高密度」屏幕（而不僅僅是高分辨率屏幕）報告自己是非高清分辨率媒體查詢的目的。

例如：Retina Apple iPad的實際屏幕分辨率爲2,048×1,536，但仍然報告爲1,024×768px。因此，相同的屏幕寬度/高度媒體查詢將與iPad 2一樣捕獲iPad 4（視網膜），並且除了在較舊的iPad的情況下稍微模糊之外 - 將看起來相同。

如果您願意，您可以將上面包含的媒體查詢與寬度/高度結合起來，以獲得針對特定HD設備的更精細的目標。

一個非常重要的例外是運行Windows 8 Mobile的高密度顯示設備，它具有能正確報告視口的known bug。

來源

2013-12-19 12:47:13 johnkavanagh

感謝您的回答。我已經在使用媒體查詢。但是我擔心的是，我已經將應用程序交付給設備（1920x1080）。然後，如果用戶傾向於在設備上運行應用程序（2048x1536），那麼確保用戶將獲得更小的佈局。如果我們需要處理這個解決方案，那麼我們又需要構建另一個版本的應用程序。所以我的問題就是基於這個。我們可以做些什麼，所以如果我們需要在2048x1536上運行我的應用程序，那麼它應該擴展布局，以便獲得與1920x1080設備相同的外觀。 –

如何處理移動設備中的不同分辨率（Retina和HD）？

回答

相關問題