使用移动CSS改进现有网页

Question

将移动专用CSS添加到现有网页的好方法是什么？

要求是:

• 非移动浏览器视图应保持原样
• 移动浏览器应该获得不同的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/