PhoneGap移動應用程序的單獨的CSS模板

Question

我正在構建兩種佈局的Phonegap應用程序：一個用於'手持設備'，一個用於'平板電腦'。我希望大於6英寸的設備顯示平板電腦佈局和較小的設備以使用手持設備佈局。

我查看了媒體查詢。我擔心的是，如果我按像素大小定位設備，例如iPad1 768px，則會出現高密度掌上電腦，這也符合此查詢的要求，顯示錯誤的佈局並使文本無法讀取，並且控件太小。對於此查詢，我已考慮webkit-min-device-pixel-ratio > 2，但是在分辨率和像素比率的不幸組合會觸發手持設備上的平板電腦模板時，這不會留下「空白」嗎？

那麼，在設備加載時，我可以遵循什麼樣的通用策略來可靠地選擇這兩種佈局中的一種（並避免設備之間的重疊）？我只支持肖像模式，我可以更改所有CSS，JS，<meta name="viewport">等。

本質上，我想能夠拿出一些規則來區分第2列和第3列http://nmsdvid.com/snippets，但沒有針對特定的設備模型。

謝謝！

Answer 1

我認爲媒體查詢中的像素寬度仍然是標準寬度，所有當前的iphones顯示320px的文檔寬度。這是因爲phonegap中使用的UIwebview只是一個標準的瀏覽器環境。

我的CSS需求取決於我的iPhone和Ipad版本的我的應用程序之間的交叉量。如果CSS幾乎相同，我將只使用媒體查詢爲一個CSS文件中的Ipad設備增加css，否則每個CSS文件都會有不同的文件。