css - 我可以使用 OS X Safari 浏览器使用媒体查询正确测试 iOS Safari 浏览器特定代码吗？

Question

我没有任何 iOS 设备，因此我所有的网络编码开发都是在 Safari 上完成的。我去过trying this awesome project to do my testing ，但我发现它可能是有限的。

具体来说，我想使用 specific media queries在我的主要 CSS 中，以便只有 iPad 可以呈现 CSS:

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

当我尝试在 OS X Safari 上使用响应测试元素通过 OS X Safari 上的本地主机访问它时，它会忽略代码。我什至尝试了更具体的横向和纵向代码，但没有成功:

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

这也不成功。

由于我没有 iPad/iPhone，所以我只能在 Apple Store 看到结果。我提供的代码是否只能在 iPad 上访问，我不能在我的计算机上使用 Safari 进行一些初始测试？

Answer 1

对于那些没有 iPhone、iPad 或 iPod Touch 等 iOS 设备的人来说，没有硬件的最便宜/免费的开发方式是 download XCode and run the iOS Simulator .您可以在模拟器中的设备之间快速切换，它们会像在设备本身上一样加载。

继续前进，感谢@icktoofay!