2012-11-30 77 views
2

這已經在這裏問過,但它從來沒有解決,所以我決定,看看有沒有人想出瞭如何做到這一點在過去一年中:iPhone:強制網頁總是呈現像素比爲1.0(不是1.5)

默認情況下,如果沒有視口元標記存在,默認情況下,iPhone和Android會自動縮放頁面以嘗試使其與框架很好地吻合。爲桌面設計的網站將被縮小,以便它們適合小視口,但顯然這些像素沒有真實地表示。

那麼,如何在移動瀏覽器上顯示全尺寸的網頁,以便在移動設備的屏幕上實際顯示300像素的真實像素?

我知道元視口方法,但從目前爲止我已經知道,在這種情況下使用的像素比率是1.5或1.0,當縮放設置爲100%並且寬度設置爲device_width,並且您可以檢測移動設備呈現的像素比率。我似乎無法找到某種方式明確強制設備只使用1.0像素比例,而不使用1.5像素比例。

設備如何使用1.0的像素比例,以便CSS中定義的300像素實際上在移動設備的屏幕上顯示300像素?如何以實際真實大小顯示網頁,而不是像素比率爲1.5?

這裏是什麼,我不希望有一個例子:目前,如果你使用meta標籤設置移動瀏覽器這樣的視窗屬性:

<meta name="viewport" content="width=device_display, initial-scale=1.0" /> 

那麼這意味着移動瀏覽器除了CSS中定義的每個「像素」實際上包含設備屏幕上的1.5像素,因此像素比率爲1.5之外,該頁面幾乎完全像頁面設計一樣。這個1.5像素比率的約定是這樣設計的,因此設計在高分辨率設備上看起來不會太小。

我明白,但我不希望在我的情況。

我想強制像素比率爲1.0總是,我會以我自己的方式處理高分辨率設備。我如何在移動瀏覽器中強制使用1.0像素比例?

* *如果有一種方法可以簡單地象素率,將工作翻番以及

回答

5

我可以使用下面的代碼來解決這個問題,我的網站:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">