使用 Mod-rewrite 为页面的移动版本提供服务

Question

我想使用 Mod-rewrite 为不同的设备提供不同版本的页面。例如，我会向具有 1920 x 1024 显示器的设备发送与 iPhone 不同的版本。似乎我想让 Mod-rewrite 根据 HTTP_USER_AGENT 的内容做出决定，我想知道谁在跟踪 iPad Air 2 放入该变量的内容，iPhone 6 放什么，等等，等等。一定有一个巨大的 table 是最新的。

感谢您的帮助

Answer 1

用户代理中有什么？

不是设备而是设备上使用的浏览软件向 Web 服务器报告其 HTTP_USER_AGENT。除了浏览器的名称和版本信息外，它通常还包括平台或设备名称以及当前运行所在的 OS 版本。

例如，最新的 Firefox 36 报告如下 user-agent

Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0

其中包括其版本 36.0、Windows 上的运行平台和 OS 版本 6.3 即 Windows 8.1。浏览器通常还会报告系统是否为 64 位 WOW64 和用户的语言环境，尽管默认值 en-US 经常丢失。

这是 Safari 在 Windows 7 和 iPad 上的报告：

Mozilla/5.0 (Windows; U; Windows NT 6.1; fr-FR) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25

而且，仅此而已。您不会收到详细信息，例如设备世代（它是 iPad 2 吗？）或其显示指标（屏幕运行的分辨率）。

因此，虽然您可以确定设备（台式机或移动设备）的 class 并提供替代内容，但您无法提供特定于分辨率的内容。那么，其他网站是如何做到的呢？嗯，答案是..

HTML5

HTML5 让您可以编写自动适应可用屏幕空间的动态布局。因此，虽然在桌面上它会以 3x2 布局呈现您的网站，但它可以在移动浏览器上自动切换到 1x6 布局。最好的部分是它独立于 user-agent;所以你会看到它也会在桌面浏览器上自动调整布局（当你调整它的大小时）以及在移动浏览器上使用它的 desktop-mode 在它有意报告的地方工作一个不同的 user-agent 来接收您网站的桌面版本。

用户代理存储库

但是，用户代理仍然派上用场。没有这样的标准化存储库，但有很多站点跟踪 user-agent 字符串，如 user-agents.org, httpuseragent.org, useragentstring.com 等。最后一个保持最新。

你显然不能匹配所有的，所以会做一个子字符串匹配而不是像

RewriteCond %{HTTP_USER_AGENT} (ipad|iphone|ipod|mobile|android|blackberry|palmos|webos) [NC]

查看 Mobile Redirect using htaccess，了解其他 用户代理 是否已成功使用他们的 .htaccess。

使用JavaScript

我记得几年前，当我访问 Google 搜索时，它会分析我的浏览器并重定向到自身，并将显示分辨率附加到查询字符串。我相信他们这样做是为了分析而不是布局。现在他们对所有内容（甚至是他们的 cookie）进行编码，因此您无法准确判断他们记录了什么。

如果您对类似的事情感兴趣，JavaScript 可以帮助您：window.screen.width 和 window.screen.height 将为您提供客户的解决方案。如果您只对实际屏幕感兴趣 space 浏览器必须呈现您的网站，请改用 availWidth 和 availHeight。

因此，您的 <script> 可以重定向到特定分辨率的页面，如

<script type="text/javascript">
  if ((screen.width >= 1280) && (screen.height >= 720)) {
    window.location.replace('http://example.com/index-hi.html');
  } else if ((screen.width >= 1024) && (screen.height >= 600)) {
    window.location.replace('http://example.com/index-med.html');
  } else {
    window.location.replace('http://example.com/index-low.html');
  }
</script>

或者，您可以设置 cookie 并使用 .htaccess.

从分辨率特定的目录提供页面

使用 Mod-rewrite 为页面的移动版本提供服务

Using Mod-rewrite to serve mobile versions of a page

mod-rewrite

http

用户代理中有什么？

HTML5

用户代理存储库

使用JavaScript