在线响应式Web测试器

Question

我正在尝试建立一个与iphone / android / ipad兼容的网站，但没有这些设备。我试着使用Responsinator，但注意到它甚至不能接收我的iphone媒体查询，例如：

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

#wrapper的背景并没有在Responsinator的iphone浏览器上显示为红色，但在真正的iphone上却是红色的。有没有好的免费网站或应用程序可以接收css媒体查询，这样我就可以在不拥有所有设备的情况下为这些设备进行开发？

谢谢

Answer 1

我认为它们在“普通”浏览器中不被接受的原因是你使用的是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/