我在将网站CSS加载到ios设备时遇到问题。我在iPhone 6和另一部iPhone上注意到了它，我的客户在他们的ipad上以及在野生动物园和Chrome上也发现了它。该网站可以完美加载到台式机以及我们测试过的所有其他移动设备上。我已经在开发人员模式下加载了iphone Safari浏览器，没有看到错误。我到处搜索，没有找到任何解决方案。
有人建议站点.htaccess文件太大，因此我删除了所有内容，但WordPress部分和CSS仍未加载，因此问题不在.htaccess文件中。
我已经能够在我测试的所有IOS设备上在browserstack.com上复制该错误。
该网站是https://www.staging.maxbotix.com
更新：我发现此问题不影响IOS 10设备，仅影响9以下的设备不到20％。知道这很有帮助。
更新：我尝试停用所有插件，但这也不能解决问题。
Screenshots
<!DOCTYPE html>
<html lang="en">
<head>
<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(); ?>
<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>
<?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()">×</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">
<!-- Topbar Start -->
<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 -->
<div class="container">
<div style="overflow-y: scroll; height: 100vh; display: none; z-index: -9999;" class="scroll-helper"></div>
<ul id="menu-topbar-menu" class="topmenu">
<?php
if ( is_user_logged_in() ) {
echo '<li><a href="' . get_permalink( get_option('woocommerce_myaccount_page_id') ) . '">My Account</a></li>';
echo '<li><a href="' . wp_logout_url( '/' ) . '">Logout</a></li>';
} else {
echo '<li><a href="' . get_permalink( get_option('woocommerce_myaccount_page_id') ) . '">Login</a></li>';
} ?>
<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>
<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>
</ul>
<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>
<?php get_search_form(); ?>
</div>
</div>
</div><!-- .topbar -->
<!-- Topbar End -->
<!-- Site Header Start -->
<header class="site-header">
<div class="container">
<div class="branding">
<a href="<?php echo site_url( '/' ); ?>" class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" />
</a>
</div>
<nav id="desktop-menu" class="primary-menu">
<h2 class="screen-reader-text">Main Navigation</h2>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'menu main-menu',
'container' => false,
'fallback_cb' => false,
) );
?>
</nav>
<div id="mobile-menu" class="primary-menu mobile-menu sidenav">
<?php
wp_nav_menu( array(
'theme_location' => 'mobile',
'menu_class' => 'menu cd-navigation',
'container' => false,
'fallback_cb' => false,
) );
?>
</div>
<button aria-controls="bs-navbar" aria-expanded="true" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</header><!-- .site-header -->
<!-- Site Header End -->
<?php if ( !is_page_template( 'page-templates/home.php' ) ) { ?>
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<div class="container">
<?php if( function_exists('bcn_display') ) bcn_display(); ?>
</div>
</div><!-- .breadcrumbs -->
<?php } ?>
<!-- Main Body Start -->
<div class="main <?php
if ( is_page_template( 'page-templates/home.php' ) ) {
echo 'container-full';
} else {
echo 'container';
} ?>">最佳答案
事实证明，该错误比看起来的简单。在经历CSS验证器上的错误时：https://jigsaw.w3.org/css-validator/我发现CSS上有多个本不应存在的多余字符，并且很可能在IOS设备（版本10以下）上损坏了。删除这些后，“ IOS无法加载CSS”问题就消失了。
关于html - 无法在IOS <版本10设备上加载CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44591932/