【问题标题】:Using Mod-rewrite to serve mobile versions of a page使用 Mod-rewrite 提供页面的移动版本
【发布时间】:2015-03-21 23:19:29
【问题描述】:

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

感谢您的帮助

【问题讨论】:

    标签: http mod-rewrite


    【解决方案1】:

    用户代理中有什么?

    向网络服务器报告其HTTP_USER_AGENT 的不是设备,而是其上使用的浏览软件。除了浏览器的名称和版本信息外,它通常还包括平台或设备名称以及当前运行的操作系统版本。

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

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

    其中包括其版本36.0、其运行的平台Windows 和操作系统版本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 吗?)或其显示指标(屏幕运行的分辨率)之类的详细信息。

    因此,虽然您可以确定设备的类别(台式机或移动设备)并提供替代内容,但您无法提供特定分辨率的内容。那么,其他网站是如何做到的呢?嗯,答案是……

    HTML5

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

    用户代理存储库

    但是,user-agents 仍然派上用场。没有标准化的存储库,但有很多网站跟踪 user-agent 字符串,如 user-agents.orghttpuseragent.orguseragentstring.com 等。最后一个一直保持最新状态迄今为止。

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

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

    查看Mobile Redirect using htaccess 以了解其他已成功用于其 .htaccess(s) 的不同 用户代理


    使用 JavaScript

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

    如果您对类似的东西感兴趣,JavaScript 可以帮助您:window.screen.widthwindow.screen.height 将为您提供客户端的分辨率。如果您只对浏览器必须呈现您的网站的实际屏幕空间感兴趣,请改用availWidthavailHeight

    因此,您的<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 从特定于分辨率的目录提供页面。

    【讨论】:

    • 感谢拉维的出色回答!我知道 HTML 的“响应式网页设计”功能,但我希望通过拥有三个版本的网站做得更好:完整版、平板电脑和智能手机。我使用的网站构建器 Zackel(请参阅 zackelwebsites.com)使调整大小和移动内容以创建网站的新版本变得微不足道(我说的是“分钟”)。我只需要知道我有多少空间,这样我就可以使用在任何地方都可以阅读的字体大小而无需手指展开,进行任何需要的大小调整和移动。您的参考资料应该可以帮助我获得该信息。再次感谢!
    • 太棒了!非常感谢,拉维。有趣的是,您如何向 SO 发布一个问题,但几天都没有得到任何回应,然后添加奖金会带来超出质量和彻底性的回应。
    猜你喜欢
    • 1970-01-01
    • 2013-01-30
    • 1970-01-01
    • 2013-12-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多