媒體查詢和設備像素比率

我正在重新設計我的網站，我決定拍攝響應式佈局。我是新來的CSS3媒體查詢，無法弄清楚如何使網站在我的智能手機上的行爲。媒體查詢和設備像素比率

該網頁目前已視此meta標籤：

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

我不知道它做什麼，因爲我沒有看到有和我的HTML沒有這之間的差異，但被告知這是有用的。

的樣式表應該靶向寬度ř< 640像素，640像素< = R < 960像素960像素和= < R.佈局將分別是320像素，640像素960像素和寬。

我面臨的問題是使用我的智能手機（也可能是所有現代高像素密度手持設備）。我的智能手機的物理分辨率爲480x800px，但在橫向模式下，報告寬度爲533px（其像素比率爲1.5和800/1.5 = 533.33，所以我猜這是預期值）。由於533 < 640，顯示的佈局是最窄的：320px。我知道智能手機中的媒體看起來不錯，而且更願意使用它。我應該如何讓智能手機在橫向模式下顯示640像素的佈局，而不會破壞當前適用於桌面瀏覽器的1：1像素比例規則？

爲每個佈局（320，640，960，分別）目前媒體的質疑是：

@media only screen and (max-width: 639px) 

@media only screen and (min-width: 640px) and (max-width: 959px) 

@media only screen and (min-width: 960px)

來源

2012-05-10 mingos

這個問題可以幫助你：http://stackoverflow.com/questions/7674247/is-there-any-equivalent-to-androids-meta- name-viewport-content-target-densi – cchana

沒問題。有點冗長，希望對其他人也有用。 – cchana

這個提問/回答可以幫助你：Is there any equivalent to Android's <meta name='viewport' content='target-densitydpi=device-dpi'> for Safari on the iPhone?這反過來又指向這個非常有用的文章：http://davidbcalhoun.com/2010/viewport-metatag

<meta name="viewport" content="target-densitydpi=device-dpi" />

應該讓你知道，這似乎是爲Android合適的解決方案，但也許不是在iOS設備上工作（沒有一臺Mac或iPhone手工確認）。

來源

2012-05-10 10:15:47 cchana

我寧願使用一個媒體查詢：

@media only screen and (max-width: 639px) and (-Webkit-min-device-pixel-ratio: 1.5), 
    @media only screen and (max-width: 639px) and (-moz-min-device-pixel-ratio: 1.5), 
    @media only screen and (max-width: 639px) and (-o-min-device-pixel-ratio: 3/2), 
    @media only screen and (max-width: 639px) and (min-device-pixel-ratio: 1.5), 
    @media only screen and (min-width: 640px) and (max-width: 959px)

來源

2013-01-08 14:06:03

媒體查詢和設備像素比率

回答

相關問題