Zurb基金會6非畫布導航不適用於Android互聯網瀏覽器

菜單圖標不會切換關閉畫布菜單。點擊後，它會像往常一樣更改內容部分的不透明度，但不會滑動以顯示菜單。Zurb基金會6非畫布導航不適用於Android互聯網瀏覽器

我的導航適用於所有瀏覽器上我的電腦和Mac，iPhone和Chrome上我的android三星S4，但不是它的股票「互聯網」瀏覽器（三星瀏覽器2.1）而這很奇怪，因爲我剛剛創建了另一個網站一個類似的基金會5非帆布菜單，工作正常。有沒有其他人經歷過這個？

這是一個WordPress的網站。我的header.php：

<!doctype html> 
<html class="no-js" <?php language_attributes(); ?>> 
<head> 
    <meta charset="utf-8"> 
    <!-- Force IE to use the latest rendering engine available --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <!-- Mobile Meta --> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta class="foundation-mq"> 
    <!-- If Site Icon isn't set in customizer --> 
    <?php if (! function_exists('has_site_icon') || ! has_site_icon()) { ?> 
    <!-- Icons & Favicons --> 
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png"> 
    <link href="<?php echo get_template_directory_uri(); ?>/assets/images/apple-icon-touch.png" rel="apple-touch-icon" /> 
      <!--[if IE]> 
       <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico"> 
       <![endif]--> 
       <meta name="msapplication-TileColor" content="#f01d4f"> 
       <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/assets/images/win8-tile-icon.png"> 
       <meta name="theme-color" content="#121212"> 
       <?php } ?> 
       <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 
       <?php wp_head(); ?> 
       <!-- Drop Google Analytics here --> 
       <!-- end analytics --> 
</head> 
<body <?php body_class(); ?>> 

<div class="off-canvas-wrapper"> 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 

     <!-- Mobile Menu --> 
     <div class="off-canvas position-right" id="off-canvas" data-off-canvas data-position="right"> 
      <?php joints_off_canvas_nav(); ?> 
     </div> 

      <div class="off-canvas-content" data-off-canvas-content> 

       <header class="header row" role="banner"> 
        <!-- Secrest of the Horse Logo --> 
        <div class="small-6 column"> 
         <h1 class="soth-logo float-left"> 
          <a href="<?php echo home_url(); ?>"><?php bloginfo('title'); ?></a> 
         </h1> 
        </div> 
        <!-- add main sponsor on right --> 
        <div class="small-6 column float-right"> 
         <?php get_sidebar('main-sponsor'); ?> 
        </div> 
       </header> <!-- end .header --> 

       <nav role="navigation"> 
        <div class="top-bar" id="top-bar-menu"> 

        <!-- Centered Desktop Menu Bar --> 
        <section class="top-bar-section show-for-large"> 
         <?php //see assets/functions/menu.php 
         joints_top_nav(); ?>  
        </section> 

        <!-- Mobile Menu Icon --> 
        <div class="top-bar-right hide-for-large"> 
         <ul class="menu"> 
          <li><a id="list-icon" data-toggle="off-canvas"><i><div class="fi-list"></div></i></a></li> 
         </ul> 
        </div> 

        </div> 
       </nav> <!-- end .top-bar -->

來源

2016-06-14 BradH

$(window).on('resize', function (ev) { ev.preventBubble(); });

工作對我來說，你可能想自定義所以它不能防止起泡上所有的調整大小事件。

來源

2017-07-17 15:46:54 Smokie

感謝您的解決方案。我沒有得到嘗試。我能夠更新到三星瀏覽器5，它工作正常，所以我就繼續前進。 – BradH

Zurb基金會6非畫布導航不適用於Android互聯網瀏覽器

回答

相關問題