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互联网浏览器

回答

相关问题