jquery mobile中的簡單窗口大小

我正在使用帶有HTML5鍋爐板的JQM。我的目標（用於測試目的）是在桌面瀏覽器中有一個整體div，它會顯示我的應用在真實設備上的預期尺寸區域。然而，在桌面瀏覽器中，與iPhone4瀏覽器寬度佈局相比，寬度似乎不匹配。我不想更改視口元定義，但我懷疑這是我的問題。有人可以向我解釋：jquery mobile中的簡單窗口大小

爲什麼一個大小爲640 x 960像素（邊框爲1像素，絕對位置）的div的大小並不反映實際設備上具有此類型的大小相同的區域外觀的設置？

問候。

來源

2012-10-22 Alain

只需使用Chrome的開發人員工具。您可以選擇欺騙您的用戶代理以及不同設備的設備指標。

當在Chrome：

按F12。
點擊右下方的齒輪圖標（設置）。
點擊Overrides標籤。
在這裏您可以選擇更改您的用戶代理字符串或覆蓋瀏覽器的視口以匹配特定設備（如iPhone）。如果您更改用戶代理字符串以模仿iPhone，則設備度量標準應自動調整爲適用於同一設備的適當尺寸。

請注意，您必須保留Chrome開發者工具打開，只要你關閉它們你失去了UA欺騙和設備規格欺騙爲好。

要直接回答你的問題，不同的屏幕具有不同的像素密度，因此具有較高像素密度的屏幕將在較小的物理區域中顯示相同數量的像素。

來源

2012-10-22 19:23:09 Jasper

感謝您的回答，這很清楚。我還發現，即使640x960分辨率的iphone4，對於設備指標，您的推薦設置也必須設置爲320x480。我的目標得到滿足，但我仍然不明白屏幕分辨率和像素密度之間的這種不對稱。我知道屏幕大小的影響，但我仍然不明白它如何？例如，爲什麼我需要爲分辨率更高的iphone4輸入320x480？如果你有時間，你能寫一個小評論嗎？無論如何，我認爲這是一個有效的答案。 – Alain

@Alain我想不出一個簡潔的解釋，但是如果你搜索谷歌，你會發現很多好的信息，例如這篇文章：http://www.quirksmode.org/blog/archives/2010/04/ a_pixel_is_not.html。我搜索了術語：'css dpi'。 – Jasper

謝謝我添加了評論，我對它有所幫助，關心。 – Alain

作爲一個附加的，

當與CSS媒體打交道查詢存在

device-width和
width之間的差異。

對於iphone4的，例如，雖然分辨率

（width X height）等於（640×960），

所述設備實際上呈現

（device-width x device-height）等於（320 x 480）

從here我們觀察到每個CSS像素由2屏幕分辨率像素處理。這是2種不同尺寸的結果。

此幫助：Pixel density for different devices

來源

2012-10-22 23:10:11 Alain

jquery mobile中的簡單窗口大小

回答

相關問題