Question

我们正在开发nodeJS中的Web应用程序，当使用移动设备进行访问时，我们需要使用不同的CSS在路由中呈现不同的视图。如何检测并实现这个？

Answer 1

这是一个非常大而复杂的问题，而且它并不是真正的“nodejs”，但我会尽力回答。

目前的最佳做法是使用feature detection和responsive design来制作移动界面。

使用CSS3，可以使用Media Queries根据所使用设备的各种属性（分辨率，像素密度，方向，“手持设备”等）确定HTML元素在屏幕上的显示方式。

您可以进一步使用功能检测来确定要加载的功能。检查是否可以在元素上定义“ontouchstart”，这将是了解是否支持触摸事件的好方法。像yepnope这样的图书馆旨在简化这一过程。

在许多情况下，这将是足够的 - 正如我所说，这些是目前的最佳做法。

但是，在少数情况下，您可能实际上想要生成不同的HTML结构。根据您使用的是客户端模板（在“SPA”应用程序中经常出现）还是在服务器上呈现，我认为您至少有三种不同的选项，两者都基本上依赖于上述信息：

选项A：使用功能检测确定您是否“在移动设备上”（无论对您而言意味着什么），然后通过包含的特殊URL从服务器请求“移动”模板一个“isMobile”标志，如“/ clientTemplates？isMobile = true”。

选项B：使用功能检测来确定您是否“在移动设备上”。然后，您可以设置一个cookie或“X-Client-Type”类型的标头，指示您是否“在移动设备上”，然后，在您的快速中间件中，您可以使用如下的约定：

app.use('/apath', function(req, res){
    //get the type of client
    var view_type = req.headers['X-Client-Type'] || 'desktop';
    var model = {};
    //by convention, "apath_mobile" or "apath_desktop" 
    //will be rendered based on this header.
    res.render('apath_' + view_type, model);
}

选项C：使用（不可靠的）“User-Agent”标头来确定发出请求的客户端是否“移动” - 再次，这通常是不是做这种检查的好方法。确定“桌面”或“移动”后，您可以使用与选项B中描述的相同类型的技术。

同样，我强烈建议您查看功能检测和响应式设计，因为它们是解决此问题的更优雅的解决方案，并且是解决此问题的长期解决方案。

如何在nodeJS for mobile中使用不同的CSS和路由？

1 个答案: