为移动页面保留相同的地址

Question

如何在桌面和移动浏览器上保持相同的地址（我的意思是 mysite.com/products/product-name）并为两者制作不同版本的页面？

你可以在这个网站上看到一个例子：http://netshoes.com.br/ 没有明确的移动版本（如 netshoes.com.br/mobile），但所有页面都是相同的，我找到了一个 Javascript 代码，它提供了“移动”和“桌面”值来配置页面：

dataLayerGA = [{
    'site': {
    'name': 'Netshoes',
    'domain': 'www.netshoes.com.br',
    'country': 'BR',
    'application': 'desktop'
  }

}];

在移动设备中加载时，“应用程序”：变为“移动设备”；

我该怎么做？

Answer 1

您链接到的公司网站使用的是 user-agent sniffing。这是一种尝试检测正在使用的设备并提供适合该设备的不同 CSS/JS 的技术。

我不建议使用这种技术。 Nor does CSS Tricks。它极不可能向前兼容（无法在较新的设备上工作）并且在当前设备上不可靠。

相反，让您的内容适用于两种设备，并使用media queries 更改网站的外观。 我还推荐像 enquire.js 这样的 JS 库，以赋予 JS 与媒体查询类似的能力。