有条件切换到网站的移动版本

Conditional switching to mobile version of web site

本文关键字：移动 版本 网站 有条件      更新时间：2023-09-26

我有一个网站，其中包含过去26年中来自数千个事件的数百万张照片，目录结构为'root'events'(year)'(eventdate)，以便将任何给定事件日期的所有照片和文件保存在一起。每个目录都有自己的索引。用于整理内容组织的SHTML文件。

我想添加一个移动版本的网站。我目前的想法是增加一个手机。SHTML页面切换到每个目录，并根据简单的屏幕宽度测试进行切换。整个站点的所有页面都使用一个公共标头include，所以我需要向公共标头添加代码，但只有当当前页面是索引时才会切换。shtml文件。我使用了下面的命令，但是无法切换。

这是我添加到include文件

的内容

……

<body>
<script>
var url = location.href;
var filename = url.substring(url.lastIndexOf('/')+1);
var a = "index.shtml";
if((screen.width < 600) && (filename.equals(a))) {
    location.href = 'mobile.shtml';
}
</script>

.........

我不是一个JS程序员，我正在尝试实现这里看到的代码，所以我会感谢学习为什么这个失败!

我有一段时间没有使用这个，但我很确定它仍然有效。将它放在HTML的头部，例如desktop website - index.html

<!-- Detect and redirect for mobile -->
    <script type="text/javascript">
        if(navigator.userAgent.match(/iP(od|hone)/i) || navigator.userAgent.match(/Android/i)){
            if(document.cookie.indexOf("iphone_redirect=false")==-1) {
                window.location.href="http://myWebsite.com/index_mobile.html";
            }
        }
    </script>

请确保在这一行添加正确的重定向:

window.location.href="http://myWebsite.com/index_mobile.html";

作为第二个解决方案，以支持您的初衷，我设法得到你的JS代码的变化工作在这里DEMO。我的演示将带你到GitHub如果你从一个宽度<或> 

<body>
<script>
    var url = window.location.href;
    var filename = url.substring(url.lastIndexOf('/')+1);
    var a = 'index.shtml';
    if((screen.width <= 600) && (filename == a)) {
        window.location.href = 'https://github.com/';
    }
</script>

*注意我的代码将重定向到GitHub而不是'mobile.shtml'

您要完成的应该是响应式设计技术。在理想情况下，您可以使用媒体查询

调整应用的CSS以使内容的格式不同。

但我有时也需要对客户端进行服务器端检测，因为我会根据形式因素呈现完全不同的小部件。您似乎在使用。shtml，恕我直言，这是一个糟糕的选择。你的web服务器至少必须支持php，这对你的应用来说是一个更强大的服务器端选择。PhpMobileDetect是一个很棒的脚本，它可以让你检测它是移动，平板电脑还是桌面。现在的问题是，我们有了巨大的手机，或者说平板手机。但它可能正好适合你的任务。

相关文章：