html - 切换到纯 HTML 的移动视图

Question

我需要使用纯 HTML 或 javascript 切换到网站的移动视图......呃，任何不需要服务器端脚本的东西。我们的网站是通过 Dropbox 临时托管的。（http://teammetalcow.com重定向到公共文件夹中的 HTML 文件。）我需要一种方法，以便我们可以检测用户的设备类型，然后适当地显示移动或桌面版本。最好有一种简单的方法来添加移动网站。这甚至可能吗？如果你能提供帮助，非常感谢。

Answer 1

您可以尝试一些库，如断点：https ://github.com/martinmartinmartin/breakpoint/ 或研究这个javascript：http ://www.sitepoint.com/javascript-media-queries/

您只需要使用 javascript 检测设备，然后重定向。

// in case of a viewport
if (document.documentElement.clientWidth < 900) {
// scripts --> redirect
    window.location = "http://www.disney.com"
}

// in case of a screen
if (screen.width < 900) {
// scripts --> redirect
    window.location = "http://www.disney.com"
}

继续

Answer 2

为此，您可以做很多不同的事情。带有媒体查询的 CSS 是一种解决方案，但提供移动版网站的更简单的方法是进行实际设备检测，并根据设备类型加载网站的替代版本。

如果您使用的是 Apache 网络服务器，Apache Mobile Filter提供了一种非常轻松的方式来执行此操作。它为您处理设备检测。一旦您以某种方式检测到移动设备，您可以将用户重定向到特定于移动设备的网站（从单独的域或子目录或类似的东西提供服务），或者使用您用于生成网站的任何后端代码在检测到移动设备时显示网站的移动版本（AMF 将设置 HTTP 标头，告诉您请求是否来自移动设备、平板电脑等）。

还有其他选择，但这些可能是最简单的方法。