有條件地切換到網站的移動版本

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";

作為支持您最初意圖的第二種解決方案，我設法在DEMO現場運行了您的JS代碼的變體。 如果您從寬度<或=到600px的屏幕上查看它，我的DEMO將帶您到GitHub。 為了正確測試它，您必須從大於和小於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

您要完成的工作應該使用響應式設計技術來完成。 在理想的世界中，您可以只使用媒體查詢

調整所應用的CSS，以不同方式格式化內容。

但是有時我還需要對客戶端進行服務器端檢測，因為我會根據形狀因子渲染完全不同的小部件。 您似乎正在使用.shtml，恕我直言，這是一個糟糕的選擇。 您的網絡服務器至少必須支持php，這是為您的應用提供更強大的服務器端選擇的一種方式。 PhpMobileDetect是一個很棒的腳本，它將為您提供一種檢測它是手機，平板電腦還是台式機的方法。 現在的問題是，我們有大量的電話或平板手機。 但這可能恰好適合您的任務。

有條件地切換到網站的移動版本

問題描述

2 個解決方案

解決方案1
0 已采納 2014-08-01 22:05:06

解決方案2
0 2014-08-02 12:31:04

有條件地切換到網站的移動版本

問題描述

2 個解決方案

解決方案1 0 已采納 2014-08-01 22:05:06

解決方案2 0 2014-08-02 12:31:04

解決方案1
0 已采納 2014-08-01 22:05:06

解決方案2
0 2014-08-02 12:31:04