6

サイトが他のナビゲーション リンクの横にある「デスクトップ」ビュー (画面の利用可能な幅 > 768) の場合、単純なドロップダウン ログイン メニューを持つレスポンシブ サイトがあります。画面の幅が 768 を下回ると、ナビゲーション リンクは最終的に選択オプションになります。問題は、ドロップダウン ログイン メニューが選択オプション内から機能しないことです。

<a href>画面幅が 768 より小さくなったときに、PHP を使用して、ドロップダウン ログイン メニューをシンプルなリンクに変更したいと考えています。

今、私は自分のページに持っています<head>:

<?
$screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>';
?>

で<body>：

<?
if($screenWidth <= "768") {
echo '<li><a href="login.php">Log in</a></li>';
} else {
?>
<div id="fancy">
<li id="login">
<a id="login-trigger" href="#">Log in <span>&#x25BC;</span></a>
<div id="login-content">
    <form>
        <fieldset id="inputs">
            <input id="username" type="email" name="Email" placeholder="Your email address" required>   
            <input id="password" type="password" name="Password" placeholder="Password" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="Log in">
            <label><input type="checkbox" checked="checked"> Keep me signed in</label>
        </fieldset>
    </form>
</div>                     
</li>
<? } ?>

私のデスクトップでは、1920 を与える $screenWidth をエコーし​​ました。したがって、「派手な」ドロップダウン ログイン メニューが表示されることを期待します。（そしてそうです）。

<a href>私のモバイルでは、$screenWidth エコーは 320 を返します。リンクが表示されることを期待します。(そうではなく、代わりに「ファンシー」メニューが表示されます)。

本体でエコーされたときに変数が異なる数値を与えるのは奇妙に思えますが、if ステートメントで比較すると出力は変わりません。

出力を変更するより良い方法はありますか?

編集：jqueryレスポンシブメニューコード

jquery.responsivemenu.js:

(function($) {
$.fn.responsiveMenu = function(options) {
    var defaults = {autoArrows: false}
    var options = $.extend(defaults, options);
    return this.each(function() {
        var $this = $(this);
        var $window = $(window);
        var setClass = function() {
            if ($window.width() > 768) {$this.addClass('dropdown').removeClass('accordion').find('li:has(ul)').removeClass('accorChild');}
            else {$this.addClass('accordion').find('li:has(ul)').addClass('accorChild').parent().removeClass('dropdown');}
        }
        $window.resize(function() {
            setClass();
            $this.find('ul').css('display', 'none');
        });
        setClass();
        $this
            .addClass('responsive-menu')
            .find('li.current a')
            .live('click', function(e) {
                var $a = $(this);
                var container = $a.next('ul,div');
                if ($this.hasClass('accordion') && container.length > 0) {
                    container.slideToggle();
                    return false;
                }
            })
            .stop()
            .siblings('ul').parent('li').addClass('hasChild');
        if (options.autoArrows) {
            $('.hasChild > a', $this)
            .find('strong').append('<span class="arrow">&nbsp;</span>');
        }
    });
}
})(jQuery);
4

5 に答える 5

5

PHP はサーバー側で実行されます。これは、var screenWidth に正確に「document.write(screen.availWidth);」が含まれていることを意味します。比べてみると。出力はクライアント側で実行されます..

于 2013-10-04T16:31:32.170 に答える
5

最も簡単なオプションは、DOM に両方のオプションを設定し、CSS3 メディア クエリを使用して、画面サイズに基づいて適切な要素を非表示/表示することです。

したがって、HTML は次のようになります。 

          <li class="login-link"><a href="login.php">Log in</a></li>
          <div id="fancy">
          <li id="login">
            <a id="login-trigger" href="#">Log in <span>&#x25BC;</span></a>
            <div id="login-content">
                <form>
                    <fieldset id="inputs">
                        <input id="username" type="email" name="Email" placeholder="Your email address" required>   
                        <input id="password" type="password" name="Password" placeholder="Password" required>
                    </fieldset>
                    <fieldset id="actions">
                        <input type="submit" id="submit" value="Log in">
                        <label><input type="checkbox" checked="checked"> Keep me signed in</label>
                    </fieldset>
                </form>
            </div>                     
        </li>

CSS は次のようになります。

.login-link, #login{
    display: none;
}
@media screen and (max-width: 767px){
    .login-link {
         display: block;
    }
    #login{
         display: none;
    }
}
@media screen and (min-width: 768px) {
    #login{
         display: block;
    }
    .login-link{
         display: none;
    }
}

編集: #login 参照を修正しました。編集 2: JSFiddle の例の追加 JSFiddleの例

于 2013-10-04T16:39:45.357 に答える
3

レスポンシブ デザインを作成するには、以前は JavaScript を使用していました。@mediaCCS3以降、ビューポートの変更に対応するために使用できます。

お気に入り：

@media screen and (max-width: 1280px) and (max-height: 1024px) {
    .splash {
        width: 100px;
    }
}
@media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
    .splash {
        width: 300px;
    }
}
于 2013-10-04T16:29:25.987 に答える
1

いくつかの考え：

PHP がデスクトップと直接やり取りできるとは思えません。

最善の策は、クライアントに javascript 経由で応答を送信させることです。ヘッダーに含まれる画面サイズ変数を使用して同じページにすぐにポストバックし、それを Cookie として追加します。Cookie が存在する場合は、ポストバックを再度実行しません。

ステップ1：クライアントの画面サイズを示す値を持つCookieが存在するかどうかを確認します。(またはセッション変数を使用) はいの場合は、それを使用して実行します。いいえの場合は、ウィンドウ サイズを識別するクエリ文字列を使用して同じページに移動する JavaScript を用意してください。ステップ 2: Cookie が存在せず、ウィンドウ サイズを示すクエリ文字列がある場合は、Cookie を作成し、それに応じてフォーマットします。

于 2013-10-04T16:30:52.523 に答える
0

あなたは試すことができます

$userBrowserAtts = get_browser(null, true)

ブラウザに関するあらゆる種類の情報の便利な配列を返します。ただし、これは $_SERVER['HTTP_USER_AGENT'] に依存しており、なりすましの可能性があることに注意してください。したがって、この方法は防弾ではありません。画面幅そのものが返されるかどうかはわかりませんが、おそらくモバイルか、タブレットかデスクトップかを確認できるはずです。

ハンディ：

http://www.php.net/manual/en/function.get-browser.php

この種のことを行う最善の方法は、CSS3 メディア クエリを使用することですが、サーバーが本当にブラウザーについて知る必要がある場合は、これが唯一の方法です。

于 2013-10-04T16:34:28.010 に答える