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