我正在设计一个移动网站，基本上我想要两个版本。一个将是 javascript 和 css 密集型的，而另一个将用于旧手机。很简单的xhtml。
有什么方法可以根据浏览器的功能自动重定向？
【问题讨论】：
标签： css browser redirect mobile
如果构建正确，那么同一个 XHTML 站点应该支持这两个版本。
也就是说，我看到了几种可能性：
【讨论】：
下载一个将元刷新设置为 1 秒的短 html 文件，其中还包含 javascript。如果 javascript 启动，那么它会立即更改元刷新的 url。
这是一个穷人的优雅降级概念，因为旧手机的连接速度较慢，所以两次下载网络应用程序是一个糟糕的设计。
理想情况下，您应该让他们下载非 js 版本，但其中包含脚本标签，因此它还将下载至少一个 javascript 文件，这将使用不显眼的 javascript 来更改原始页面。
但是，因为我认为这将是一个糟糕的设计，这就是为什么我建议元刷新，在下载之间有一个非常小的暂停，以便给 javascript 时间来修复它。
您还可以通过检查某些对象的存在（例如<canvas>）并根据对正确网址的更改来检查哪个版本的javascript。
【讨论】：
查看UAProf，“有关捕获无线设备的能力和偏好信息的规范。内容提供商可以使用此信息为特定设备以适当的格式生成内容。” （引自维基百科页面。）
WURFL 也很有趣，它是一个开源的“XML 配置文件，其中包含有关许多移动设备的功能和特性的信息”。您可能还想阅读以下内容：WURLF and UAProf。
DeviceAtlas 是一种流行的商业解决方案，声称比 WURFL 更全面（它包括所有 WURFL 数据等等）。见：How do you compare DeviceAtlas to WURFL and UAProf。
【讨论】：
您可能不希望网站有两个单独的版本。使用feature detection 逐步增强您的简单体验来确定何时做这些花哨的事情是一个更好的主意。话虽如此，如果浏览器不支持 CSS 规则，它们通常会自行优雅地降级。
.background-gradient {
background-color: #333;
background-image: url(some_image.png); /*older browsers simply get the bg image*/
background-image: -webkit-linear-gradient(top, #333333, #eeeeee);
background-image: -moz-linear-gradient(top, #333333, #eeeeee);
background-image: -ms-linear-gradient(top, #333333, #eeeeee);
background-image: -o-linear-gradient(top, #333333, #eeeeee);
background-image: linear-gradient(top, #333333, #eeeeee);
}
【讨论】：