2017-06-16 39 views
-1

我无法让我的站点CSS加载到iOS设备上。我已经注意到它在我的iPhone 6上,另一个iPhone和我的客户在他们的ipad上发现了它,并且在safari和chrome上。该网站在桌面和我们测试过的所有其他移动设备上完美加载。我已经在开发者模式下加载了iphone safari浏览器,并且没有发现任何错误。我搜查了四周,没有找到任何解决方案。CSS不加载IOS <版本10设备

有人建议网站.htaccess文件太大,所以我删除了一切,但WordPress部分和CSS仍然没有加载,所以问题不在.htaccess文件中。

我已经能够在我测试的所有IOS设备上的browserstack.com上复制错误。

该网站是https://www.staging.maxbotix.com

更新:我发现这个问题不会影响IOS设备10,只有那些拥有9和下小于20%。这有助于了解。

更新:我试图停用所有插件,但这并没有解决问题。

Screenshots

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <?php wp_head(); ?> 
 
    \t <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700" rel="stylesheet"> 
 

 

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

 
<div id="fb-root"></div> 
 
<script>(function(d, s, id) { 
 
    var js, fjs = d.getElementsByTagName(s)[0]; 
 
    if (d.getElementById(id)) return; 
 
    js = d.createElement(s); js.id = id; 
 
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"; 
 
    fjs.parentNode.insertBefore(js, fjs); 
 
}(document, 'script', 'facebook-jssdk'));</script> 
 

 

 
\t <?php include_once("analyticstracking.php") ?> 
 

 
<div id="mySidenav"> 
 
    <div class="extra-holder"> 
 
    <img class="top-logo-open" src="https://www.staging.maxbotix.com/wp-content/uploads/2017/06/maxbotixlogo.png" alt="Small Logo" /> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    </div> 
 
    <div class="scrollable-menu"> 
 
    <nav class="primary-menu myside-menu" id="side-menu"> 
 
     <?php 
 
     wp_nav_menu(array(
 
      'theme_location' => 'side', 
 
      'menu_class' => 'menu main-menu', 
 
      'container' => false, 
 
      'fallback_cb' => false, 
 
     )); 
 
     ?> 
 
     <div class="side-info"> 
 
      <p> 
 
       Call Today and Save!<br/> 
 
       <a href="tel:1.218.454.0766">1.218.454.0766</a> 
 
      </p> 
 
     </div> 
 
    </nav> 
 
     </div> 
 
</div> 
 

 
<div id="side-content"> 
 
\t <!-- Topbar Start --> 
 
\t <div class="topbar custom-topbar"> 
 

 
<!-- Side Menu --> 
 

 
     <div id="side-icon"> 
 
      <img class="top-logo" src="https://www.staging.maxbotix.com/wp-content/uploads/2017/06/maxbotixlogo.png" alt="Small Logo" /> 
 
      <button type="button" class="navbar-toggle side-effect" onclick="openNav()"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 

 

 
     <!-- END Side Menu --> 
 

 
\t \t <div class="container"> 
 
     <div style="overflow-y: scroll; height: 100vh; display: none; z-index: -9999;" class="scroll-helper"></div> 
 
\t \t \t <ul id="menu-topbar-menu" class="topmenu"> 
 
\t \t \t \t <?php 
 
\t \t \t \t if (is_user_logged_in()) { 
 
\t \t \t \t \t echo '<li><a href="' . get_permalink(get_option('woocommerce_myaccount_page_id')) . '">My Account</a></li>'; 
 
\t \t \t \t \t echo '<li><a href="' . wp_logout_url('/') . '">Logout</a></li>'; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t echo '<li><a href="' . get_permalink(get_option('woocommerce_myaccount_page_id')) . '">Login</a></li>'; 
 
\t \t \t \t } ?> 
 
     <li><a href="#"><span class="ask-q">Ask a Question</span> <i class="fa fa-question-circle"></i></a></li> 
 
       <li><span class="follow-text">Follow MaxBotix:</span> 
 
        <div class="like-wrap"> 
 
         <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div> 
 
         <div class="gplus-wrap"><div class="g-plusone" data-size="medium" data-annotation="none" data-href="https://developers.google.com/"></div></div> 
 
        </div> 
 
       </li> 
 
     \t \t \t \t <li class="phone-number"><a href="tel:1.218.454.076">Order by Phone: <span style="color: #ffffff;">1.218.454.0766</span></a></li> 
 
\t \t \t </ul> 
 
\t \t \t <div class="search-container"> 
 
     <a id="cart-link" href="<?php echo wc_get_cart_url(); ?>"><span>Cart</span><i class="fa fa-shopping-cart" aria-hidden="true"></i></a> 
 
\t \t \t \t <?php get_search_form(); ?> \t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div><!-- .topbar --> 
 
\t <!-- Topbar End --> 
 

 
\t <!-- Site Header Start --> 
 
\t <header class="site-header"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="branding"> 
 
\t \t \t \t <a href="<?php echo site_url('/'); ?>" class="logo"> 
 
\t \t \t \t \t <img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" alt="<?php bloginfo('name'); ?>" /> 
 
\t \t \t \t </a> \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <nav id="desktop-menu" class="primary-menu"> 
 
\t \t \t \t <h2 class="screen-reader-text">Main Navigation</h2> 
 
\t \t \t \t <?php 
 
\t \t \t \t \t wp_nav_menu(array(
 
\t \t \t \t \t \t 'theme_location' => 'primary', 
 
\t \t \t \t \t \t 'menu_class' => 'menu main-menu', 
 
\t \t \t \t \t \t 'container' => false, 
 
\t \t \t \t \t \t 'fallback_cb' => false, 
 
\t \t \t \t \t)); 
 
\t \t \t \t ?> 
 
\t \t \t </nav> 
 
\t \t \t <div id="mobile-menu" class="primary-menu mobile-menu sidenav"> 
 
\t \t \t \t <?php 
 
\t \t \t \t \t wp_nav_menu(array(
 
\t \t \t \t \t \t 'theme_location' => 'mobile', 
 
\t \t \t \t \t \t 'menu_class' => 'menu cd-navigation', 
 
\t \t \t \t \t \t 'container' => false, 
 
\t \t \t \t \t \t 'fallback_cb' => false, 
 
\t \t \t \t \t)); 
 
\t \t \t \t ?> 
 
\t \t \t </div> 
 
\t \t \t <button aria-controls="bs-navbar" aria-expanded="true" class="navbar-toggle" type="button"> 
 
\t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t </button> \t \t \t 
 
\t \t </div> 
 
\t </header><!-- .site-header --> 
 
\t <!-- Site Header End --> 
 

 
\t <?php if (!is_page_template('page-templates/home.php')) { ?> 
 
\t \t <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> 
 
\t \t \t <div class="container"> 
 
\t \t \t  <?php if(function_exists('bcn_display')) bcn_display(); ?> 
 
\t \t \t </div> 
 
\t \t </div><!-- .breadcrumbs --> 
 
\t <?php } ?> 
 

 
\t <!-- Main Body Start --> 
 
\t <div class="main <?php 
 
\t if (is_page_template('page-templates/home.php')) { 
 
\t \t echo 'container-full'; 
 
\t } else { 
 
\t \t echo 'container'; 
 
\t } ?>">

+0

你好保罗我在iPhone 6测试它,并从我身边很好地工作。 – jtorrescr

+1

欢迎来到Stack Overflow。我们不会去外部地点看看你在问什么。你的代码的相关部分必须在这里,在问题本身,作为文本和格式正确。请参阅[问]和[如何创建最小,完整且可验证的示例]。在你参与其中的时候,参加[游览]并阅读其他[帮助]页面可能是一个好主意,以便更好地熟悉网站。 –

+0

很高兴知道@jtorrescr。您的设备上安装了哪个版本的IOS,以及您使用的是哪种浏览器。我还有其他几个人这样说过,但是我测试过的大多数IOS设备仍然存在问题。即使在隐身模式下进行测试也是如此。很高兴知道有多少人有这个问题,有多少人没有。 –

回答

-1

你链接的HREF不正确的看向我:

<link rel="stylesheet" id="dashicons-css" href="//www.staging.maxbotix.com/wp-includes/css/dashicons.min.css" type="text/css" media="all">

我还以为你ñ包括https://

各种浏览器可能对此更挑剔。

+0

我认为(//)现在应该是首选标准。 wp-rocket插件正在改变我的看法。我可以尝试关闭它,看看它是否有所作为,但在添加插件之前我遇到了问题,所以我认为这不会解决问题。 –

0

事实证明,错误比看起来简单。虽然经历了CSS验证器上的错误:https://jigsaw.w3.org/css-validator/我发现有几个地方CSS中有额外的字符,应该不会在那里,而且最有可能在iOS设备上破坏(在版本10下)。一旦这些被删除,“IOS不加载CSS”问题就消失了。