iphone - 使用移动 CSS 改造现有网页

Question

将特定于移动设备的 CSS 添加到现有网页的好方法是什么？

要求是:

• 非移动浏览器 View 应保持原样
• 移动浏览器应该使用不同的 CSS(删除某些元素并简化页面)
• 感兴趣的移动浏览器是:iPhone 和 Android。 Win7 和 WebOS 最好有
• 修改次数越少越好

从长远来看，我正在研究 HTML5Mobile 样板和各种其他解决方案，但就短期而言，我正在寻找一种基于 CSS 的低工作量解决方案。

我希望只有客户端的解决方案(而不是提供不同的页面)。

建议？是否有可以帮助我解决问题的库/文章/代码片段？

Answer 1

处理此问题的最佳方法是 CSS 媒体查询，它可以让您为不同的浏览器分辨率和功能提供不同的样式表。其中一个主要好处是您不必执行浏览器嗅探或任何服务器端代码，当每个月都有数十种新设备上市时，维护这些代码是一场噩梦。

虽然浏览器嗅探需要您为每种类型或设备组在脚本中添加特定的检测代码，但媒体查询甚至可以处理您从未听说过的设备。

举个人为的例子，这会使您的页面在移动浏览器和小屏幕上显示粉红色文本:

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
    body {
        color: hotpink;
    }
}

许多使用媒体查询的好例子:
http://responsivewebdesigns.tumblr.com/