0

レスポンシブ WordPress テーマを開発しています。

通常のコンピュータ (フルサイズ) では、メニューは次のように表示されます。

<div id="header-menu" role="complementary">    
     <ul>
         <?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
     </ul>
</div>

特定の幅で (モバイル デバイスとタブレットの場合、このメニューを次のようなメニューに置き換えたいと思います。

<div id="header-menu-mobile" role="complementary">
       <form action="<?php bloginfo('url'); ?>" method="get">
       <?php

       $args1e = array(
        'depth'            => 1,
        'child_of'         => 0,
        'selected'         => 0,
        'echo'             => 1,
        'name'             => 'page_id');

        wp_dropdown_pages( $args1e ); ?>

       </form>
    <script type="text/javascript"><!--
    var dropdown = document.getElementById("page_id");
    function onCatChange()
    {
        if ( dropdown.options[dropdown.selectedIndex].value > 0 )
        {
            location.href = "<?php echo get_option('home');
            ?>/?page_id="+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
    --></script>
</div>

特定の幅のCSSで「header-menu」を非表示に設定し、「header-menu-mobile」を表示に設定することができました。私は頭がちょっと疲れています。おそらくこれを機能させるためのより良い解決策があります。

方法についてのアイデアはありますか？

敬具 ヨハン

4

2 に答える 2

0

あなたのCSS考えは正しいです。それにこだわります。この標準の CSS 構造を使用して、Web サイトをレスポンシブにします。

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }
于 2013-08-22T12:23:47.537 に答える
0

$_SERVER['HTTP_USER_AGENT']; ユーザーのオペレーティングシステムとブラウザについて教えてください。 例に応じてコードを組み立てることができます-

if $_SERVER['HTTP_USER_AGENT'] == 'win 8'
echo $menu_for_windows ;
else if $_SERVER['HTTP_USER_AGENT'] =='opera mini'
echo $menu_for_mobile

等々 ..

また

$browser = get_browser(null, true);
echo $browser['platform'] ; exit;

ユーザープラットフォームを教えてください

于 2013-08-22T12:08:08.847 に答える