Zurb Foundation 6オフキャンバスナビゲーションがAndroidのインターネットブラウザで機能しない

メニューアイコンはオフキャンバスメニューを切り替えません。クリックすると、いつものようにコンテンツセクションの不透明度が変更されますが、スライドしてメニューが表示されることはありません。Zurb Foundation 6オフキャンバスナビゲーションがAndroidのインターネットブラウザで機能しない

私のナビゲーションは、自分のPCとMac、iPhone、ChromeのすべてのブラウザでAndroidのSamsung S4で動作しますが、「インターネット」ブラウザ（Samsung Browser 2.1）はありません。同様のFoundation 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

あなたのソリューションに感謝します。私はそれを試してみることはありませんでした。私はSamsung Browser 5にアップデートできました。 – BradH

Zurb Foundation 6オフキャンバスナビゲーションがAndroidのインターネットブラウザで機能しない

答えて

関連する問題