2

我想学习如何为移动设备设计网页，并且对“媒体”和测试我的网页感到困惑。我发现这个网站 - http://mobiletest.me/ - 非常适合测试 WIDTHS，但它似乎无法检测到我的页面实际上是为哪些设备设计的。让我解释。

我目前只有一台 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="handheld">

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

我认为那是因为我使用的是笔记本电脑（“屏幕”），所以当我通过模拟智能手机查看它时，它仍然将其解释为计算机并且只修改宽度。

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

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

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

所以我想知道是否有一个地方可以在模拟设备中测试我的网页，这些模拟设备不仅具有小屏幕，而且实际上可以用作移动设备，并按照它们的意思解释我的媒体链接、媒体中断等发挥作用。

谢谢。

4

1 回答 1

1

@media handheld大多数智能手机/平板电脑告诉 CSS 它们是无用的@media screen。而是使用媒体查询。http://css-tricks.com/css-media-queries/

关于测试，您提到您使用的是 Mac，因此您可以安装 IOS 模拟器，您将能够同时运行 iPad 和 iPhone。这需要从 AppStore 下载和安装 Xcode（您可能需要一个 Apple 开发人员帐户 - 我不记得了）。

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

您可以使用一些框架来帮助您开发响应式网站，主要是：

推特引导http://getbootstrap.com/

Zurb 基金会http://foundation.zurb.com/

我还应该提到http://www.browserstack.com/ - 它不是免费的，但它可以让您在大量浏览器和设备上运行您的网站。

希望这可以帮助。

于 2013-11-11T08:49:06.507 回答