Question

我有一个网站，其中包含过去26年来数千个事件的数百万张照片，目录结构是\ root \ events \（year）\（eventdate），以便所有给定事件的照片和文件日期保持在一起。每个目录都有自己的index.shtml文件，用于对内容的组织进行排序。

我想添加该网站的移动版本。我目前的想法是在每个目录中添加一个mobile.shtml页面，并根据简单的屏幕宽度测试进行切换。整个站点的所有页面都使用公共头文件，因此我需要将代码添加到公共头文件中，但只有在当前页面是index.shtml文件时才会切换。我使用了以下内容，但无法切换。

这是我添加到包含文件

的内容

...

<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程序员，并且正在尝试实现此处看到的代码，所以请欣赏为什么会失败！提前感谢任何回复的人。

Answer 1

我有一段时间没用过这个，但我很确定它仍然可以使用。将其放在HTML的标题中，例如桌面网站 - 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生效。如果你从宽度大于＆lt;的屏幕上看它，我的DEMO会把你带到GitHub。或=至600px。要正确测试，您必须从600px宽度以上和以下的显示器尺寸查看它。以下是我的JS代码的变体：

<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'的区别

Answer 2

您要完成的工作应该采用响应式设计技术。在一个完美的世界中，你可以使用media queries

调整用于格式化内容的css。

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

有条件地切换到移动版网站

2 个答案: