在线响应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

在线响应Web测试

回答

相关问题