如何在nodeJS移动版中使用不同的CSS和路由? [英] How to use different CSS and routes in nodeJS for mobile?

问题描述

我们正在用nodeJS开发一个Web应用程序，使用移动设备访问该Web应用程序时，我们需要使用不同的CSS在路由中呈现不同的视图.

We are developing a web application in nodeJS for which when access with a mobile device we need to render different views in our routing using different CSS. How can one detect and implement this?

推荐答案

这是一个非常大而复杂的问题，并不是真正的"nodejs"问题，但是我将尝试给出答案.

This is a very big, complex question, and it's not really "nodejs" specfic, but I'll try to take a shot an answering.

当前的最佳做法是使用功能检测和响应式设计以生成移动界面.

The current best practices are to use feature detection and responsive design to produce the mobile interface.

使用CSS3，可以使用媒体查询根据所用设备的各种属性(分辨率，像素密度，方向，手持式"等)确定HTML元素应如何在屏幕上显示.

With CSS3, it's possible to use Media Queries to determine how HTML elements should be displayed on screen, based on various properties of the device in use (resolution, pixel density, orientation, "handheld", etc.)

您可以走得更远，并使用功能检测来确定要加载的功能.检查是否可以在元素上定义"ontouchstart"，这是了解是否支持(或不支持)触摸事件的好方法.像 yepnope 这样的库旨在简化此过程.

You can go further and use feature detection to determine which features to load. Checking if "ontouchstart" can be defined on an element, would be a good way to know if touch events were (or were not) supported. Libraries like yepnope were designed to make this easy.

在许多情况下，这已经足够了-正如我所说，这些是当前的最佳做法.

In many cases, this will be adequate -- and as I said, these are the current best practices.

但是，在某些情况下，您实际上可能想产生一个不同的HTML结构.根据您是使用客户端模板(在"SPA"应用程序中经常发生)还是在服务器上渲染，我认为您至少有三个不同的选择，而这两个选择仍然基本上取决于上面的信息:

However, In a few cases, you may actually want to produce a different HTML structure. Depending on whether you're using client-side templates (as happens frequently in "SPA" apps), or rendering on the server, I think you have at least three different options, both essentially still depend on the information above:

选项A:使用功能检测确定您是否在移动"(对您而言意味着什么)，然后通过特殊URL从服务器请求移动"模板，该URL包括一个"isMobile"标志，例如"/clientTemplates?isMobile = true".

Option A: Use feature detection to determine if you're "on mobile" (whatever that means for you), then request the "mobile" templates from the server via a special URL that includes a "isMobile" flag, like "/clientTemplates?isMobile=true".

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

Option B: Use feature detection to determine if you're "on mobile". You can then set a cookie, or "X-Client-Type"-type header that indicates whether you're "on mobile", then, in your express middleware, you can use a convention like the following:

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:使用( unreliable )用户代理"标头来确定发出请求的客户端是否为移动"-同样，这通常是这不是进行此类检查的好方法.确定台式机"或移动设备"后，就可以使用选项B中所述的相同类型的技术.

Option C: Use the (unreliable) "User-Agent" header to determine whether the client making the request is "mobile" -- again, this is typically not a good way to do this type of checking. Once you have determined "desktop" or "mobile", you can use the same type of technique as described in Option B.

再次，我强烈建议您着眼于特征检测和响应式设计，因为它们是解决此问题的更为优雅的解决方案，并且是对此的较长期解决方案.

Again, I highly, highly recommend you look at feature detection and responsive design, as they are much more elegant solutions to this problem, and are the longer-term solution to this.

这篇关于如何在nodeJS移动版中使用不同的CSS和路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！