使用移动 CSS 改造现有网页

Question

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

要求是：

• 非移动浏览器视图应保持原样
• 移动浏览器应该使用不同的 CSS（删除某些元素并简化页面）
• 感兴趣的移动浏览器是：iPhone 和 Android。拥有 Win7 和 WebOS 会很不错
• 更改次数越少越好

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

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

建议？是否有图书馆/文章/代码 sn-p 可以帮助我？

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/

Answer 2

最好的方法是使用 php 为不同的浏览器返回不同的 css。
示例：

<?php
header("Content-type: text/css");
$browser = get_browser();
if($browser['platform'] == 'iPhone')
    readfile("iPhone.css");
else
    readfile("normal.css");

编辑：
您也可以在客户端执行此操作。在javascript中检测客户端，您可以使用

if(navigator.userAgent.match(/iPhone/i))

或其他平台类似的东西。要包含您需要的特定 css jQuery Include Many 插件，然后使用：

$.include('somecss.css');

大家一起：

<script>
    if(navigator.userAgent.match(/iPhone/i))
        $.include('iPhone.css');
    else
        $.include('Other.css');
</script>