基金會5頂部工作不支持智能手機

我正在開發基金會5支持的WordPress主題。一切看起來都很順利，但是當我切換到智能手機時出現了問題。正如您在下圖中看到的那樣，在桌面上調整瀏覽器窗口大小時，基礎頂部欄會摺疊爲小屏幕模式。不幸的是，如果我從我的手機瀏覽器訪問該頁面，頂欄中的文本會變小，菜單不會摺疊。基金會5頂部工作不支持智能手機

這裏的header.php代碼：

<body <?php body_class(); ?>> 

     <header class="site-header" role="banner"> 
      <div class="row"> 
       <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1> 
       <h2 class="site-description"><?php bloginfo('description'); ?></h2> 
      </div> 
     </header> 

     <div class="contain-to-grid"> 
      <nav id="nav" role="navigation" class="top-bar" data-topbar> 
       <ul class="title-area"> 
        <li class="name"> 
         <h1><a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1> 
        </li> 
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> 
       </ul> 

       <section class="top-bar-section"> 
        <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'right', 'walker' => new Foundation_Walker())); ?> 
       </section> 
      </nav> 
     </div> 

     <div id="container" class="row">

下面的圖片顯示了出現在我的桌面瀏覽器：

Resized window in forefox for mac

正如你所看到的，菜單定期崩潰。

第二個圖像顯示在谷歌瀏覽器會發生什麼在Android上：

mobile chrome

在iPad上同樣的問題：文字太小，菜單不垮。

希望有人能幫助我。

這是一個活生生的例子：http://htmlintro.altervista.org/wordpress/

來源

2014-04-29 Carlo

解決了！我不包括以下meta標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

現在它工作正常。

來源

2014-04-29 17:02:14 Carlo

這對我也有效！ – skud

不錯的一個傢伙。顯然，基金會的一些例子已經過時了。 – Andrade

基金會5頂部工作不支持智能手機

回答

相關問題