在線響應Web測試

我想建立一個網站與iphone/android/ipad兼容，但不擁有這些設備。我嘗試使用Responsinator，但注意到，它甚至沒有拿起我的iPhone媒體查詢，如：在線響應Web測試

/* iphone */ 
@media only screen and (max-device-width: 480px) { 
    #wrapper { background-color: red; } 
}

爲#wrapper指定的背景是沒有出現上衝Responsinator的iPhone瀏覽器，但它是一個真正的iPhone。是否有任何良好的免費網站或應用程序，將挑選CSS媒體查詢，以便我可以開發這些設備，而不必擁有所有這些設備？

謝謝

來源

2012-03-18 Nick B

只需調整您的瀏覽器窗口？唯一難以測試的媒體查詢是針對視網膜顯示的，或像素比率大於1（「最小設備像素比」）的媒體查詢。哦，你可能想使用'max-width'而不是'max-device-width'，這可能是爲什麼他們沒有拿起。 – powerbuoy 2012-03-18 22:01:37

[Ripple]（http://ripple.tinyhippos.com/）看起來很有趣。我還沒有使用過它，但它提供了一些與Android模擬器相比似乎體面的仿真（這太可怕了）。 – 2012-03-18 22:07:32

我覺得他們不是在「正常」的瀏覽器拿起原因是，你正在使用max-device-width。如果您使用max-width而不是他們將工作「到處」（而不是IE）。

我也建議先編碼手機。不要從最大的分辨率開始，而是從最小的分辨率開始，從最小的開始，隨着分辨率的增長改進佈局。

我個人使用這個代碼：

/* Default */ 

/* Little larger screen */ 
@media only screen and (min-width: 480px) { 

} 

/* Pads and larger phones */ 
@media only screen and (min-width: 600px) { 

} 

/* Larger pads */ 
@media only screen and (min-width: 768px) { 

} 

/* Horizontal pads and laptops */ 
@media only screen and (min-width: 992px) { 

} 

/* Really large screens */ 
@media only screen and (min-width: 1382px) { 

} 

/* 2X size (iPhone 4 etc) */ 
@media only screen and 
     (-webkit-min-device-pixel-ratio: 1.5), only screen and 
     (-o-min-device-pixel-ratio: 3/2), only screen and 
     (min-device-pixel-ratio: 1.5) { 

}

來源：http://stuffandnonsense.co.uk/projects/320andup/

來源

2012-03-18 22:05:14 powerbuoy

謝謝是的最大設備寬度是罪魁禍首 – 2012-03-18 23:46:54

在線響應Web測試

回答

相關問題