1

私の Web ページには、ブラウザの幅が 699 未満の場合にモバイル ページにリダイレクトされるというリダイレクト スクリプトがあります。

<script type="text/javascript">

if (screen.width <= 699) {
document.location = "http://www.idekraft.se/m/";
}

</script>

問題は今です-私のモバイルページには、「通常のWebページに移動してください」というボタンがあります。私のばかげた画面幅のリダイレクト スクリプトにより、必要に応じてモバイルで「通常の」Web ページにアクセスすることはできません。

私の質問は、スクリプトをどのように解決すればよいかということです。おそらく、このアドレス www.idekraft.se/m から来た場合、このスクリプトは影響しません。

ありがとう！

4

3 に答える 3

2

クッキーの使用。そして、私は jQuery cookie pluginを好みます。

リンクがあるモバイルページで、clickリンクのイベントにリスナーを配置し、リダイレクトする前に、Cookieを$.cookie('interface', 'web');設定してから、完全なWebページの設定インターフェイスにチェックを追加します

if (tyepof $.cookie('interface') != 'undefined' || screen.width < 699) {
    // redirect
}

したがって、誰かが完全な Web サイトにアクセスした場合、画面が 699 ピクセルより小さい場合はモバイルにリダイレクトされ、モバイル サイトの「フル バージョン」リンクをクリックすると、システムは Cookie を設定し、tointerface = 'web'と if ステートメントはtrueユーザーをリダイレクトすることはできません。

完全に機能する例を次に示します。

deskop.php:

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery.cookie.js"></script>
        <script type="text/javascript">
            var ui = $.cookie('ui');

            $(document).ready(function() {
                if (ui != 'desktop' && screen.width < 699) {

                    $.cookie('ui', 'mobile', { expires: 365 });
                    window.location = '/mobile.php';
                }   
            });

            $(document).on('click', 'a#redirect', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $.cookie('ui', 'mobile', { expires: 365 });
                window.location = $(this).attr('href');
            });
        </script>
    </head>
    <body>
        <a href="/mobile.php" id="redirect">Go to the mobile version</a>
    </body>
</html>

mobile.php:

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery.cookie.js"></script>
        <script type="text/javascript">
            var ui = $.cookie('ui');

            $(document).ready(function() {
                if (ui != 'desktop' && screen.width > 699) {

                    $.cookie('ui', 'desktop', { expires: 365 });
                    window.location = '/desktop.php';
                }   
            });

            $(document).on('click', 'a#redirect', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $.cookie('ui', 'desktop', { expires: 365 });
                window.location = $(this).attr('href');
            });
        </script>
    </head>
    <body>
        <a href="/desktop.php" id="redirect">Go to the desktop version</a>
    </body>
</html>

また、リソースのドキュメント ルートのフォルダーにjquery.cookie.jsファイルが必要です。/js

うまくいけば、それで十分です。より明確に説明する方法がわかりません...

于 2012-04-23T09:39:05.513 に答える
0

最も簡単な方法は、Cookie を使用することです。ユーザーが [通常の Web ページに移動する] をクリックすると、Cookie が設定されます。

<button type="button" onclick="document.cookie='mobile=no';history.back()">
  Take me to the normal webpage
</button>

通常のページで、Cookie の存在を確認します。

if (screen.width <= 699 && !/mobile=no/.test(document.cookie)) {
    document.location = "http://www.idekraft.se/m/";
}
于 2012-04-23T09:40:29.353 に答える
0

小さな画面のデバイスで誰かがメインの Web サイトを表示したい場合などに、クエリ文字列を追加します。

http://www.idekraft.se/m=0

if ステートメントで の値を確認しますm。

擬似コード:

if screen width is less than 699 AND m is not equal to zero
   redirect

更新: セッションまたは Cookie も使用できます。私見、クエリ文字列の方が優れています。

于 2012-04-23T09:38:08.243 に答える