Css 在各种设备中测试网页的网站提示

我想学习如何为移动设备设计网页，对“媒体”和测试我的网页感到困惑。我发现了这个网站——它非常适合测试宽度，但它似乎无法检测我的页面实际上是为哪些设备设计的。让我解释一下

我目前只有一台Mac笔记本电脑，没有iPad或智能手机。但我已经学会了如何使用媒体来区分不同类型的设备。例如，下面的样式表A应该只影响计算机（“屏幕”）中显示的页面，而样式表B应该只影响手持设备中显示的页面

链接href=”http://Geobop/2B/CSS/A.css“rel=“stylesheet”type=“text/css”media=“screen”> 链接href=”http://Geobop/2B/CSS/B.css“rel=“stylesheet”type=“text/css”media=“掌上电脑”>

但是，A.css中的样式在我在mobiletest.me测试的每个设备中都是可见的，而B.css中的样式在任何地方都不可见

我假设这是因为我使用的是笔记本电脑（“屏幕”），所以当我通过模拟智能手机查看它时，它仍然会将它解释为一台电脑，并且只会修改宽度

类似地，我学会了在样式表中使用“媒体中断”，如下所示：

@media handheld
{
 body { background: #0f0; }
}

但我也有同样的问题；上面的代码在所有模拟设备中都会被忽略，但如果我将其从“手持”更改为“屏幕”，它在所有设备中都是可见的

因此，我想知道是否有一个地方可以让我在模拟设备中测试我的网页，这些设备不仅有微小的屏幕，而且实际上可以作为移动设备使用，并解释我的媒体链接、媒体中断等，它们的工作方式

---

谢谢。

多媒体手持设备毫无用处大多数智能手机/平板电脑告诉CSS它们是

@media screen

。而是使用媒体查询

关于测试，你提到你在Mac电脑上，所以你可以安装IOS模拟器，你可以同时运行iPad和iPhone。这需要从AppStore下载并安装Xcode（您可能需要一个Apple开发者帐户-我记不起来了）

然而，设计屏幕分辨率比设计设备分辨率更好。这样，您的网站/应用程序更能证明未来。首先用一个非常窄的浏览器来构建你的网站——一旦你对它的外观感到满意，就开始扩展浏览器，直到你的布局中断。这将是您第一次查询媒体时使用的分辨率。然后修正你的布局，直到它在那个分辨率下再次变好，然后再次展开，直到它断裂并重复。这被称为移动优先设计

您可以使用一些框架来帮助您创建响应性网站，主要包括：

推特引导

< Zurb基金会> 我还应该提到——它不是免费的，但是它可以让你在大量的浏览器和设备上运行你的网站

希望这有帮助