CSS 未在 IOS < ver 10 设备上加载
Posted
技术标签:
【中文标题】CSS 未在 IOS < ver 10 设备上加载【英文标题】：CSS not loading on IOS < ver 10 devices 【发布时间】：2017-06-16 14:35:31 【问题描述】：我无法让我的网站 CSS 加载到 ios 设备上。我在我的 iPhone 6 和另一部 iphone 上注意到了它，我的客户在他们的 ipad 以及 safari 和 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" />
<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" />
<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" />
</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';
?>">【问题讨论】：
你好 Paul，我在 iPhone 6 上测试过，在我这边运行良好。 欢迎来到 Stack Overflow。我们不会去外部位置查看您的要求。您的代码的相关部分必须在问题本身中以文本形式出现并且格式正确。请参阅How to Ask 和 [如何创建最小、完整且可验证的示例]。阅读tour 并阅读其余的help center 页面可能是个好主意，以便更好地熟悉该网站。 很高兴知道@jtorrescr。您的设备上的 IOS 版本以及您使用的浏览器。我有一些其他人这么说，但对于我测试过的大多数 IOS 设备，问题仍然存在。即使在隐身模式下进行测试。很高兴知道有多少人有这个问题，有多少人没有。 @KenWhite 我很想在这里发布我的代码的相关部分，但我现在真的不知道哪些部分是相关的。如果我为该网站发布了所有代码，那么这将占用太多空间。 阅读我提供的minimal reproducible example 链接。给您带来不便并不重要，因为我们不是来为您提供个人帮助的。这个网站是为未来的人们建立一个知识库，如果答案恰好对你有帮助，那么它是一个附带的好处。正如所写的那样，您的帖子对未来的读者来说价值为零，因为如果有人访问您的网站并告诉您如何修复它，您发布的链接不再显示问题并且问题变得无用。代码属于此处供其他人使用。如果这不起作用，请在其他地方询问。 【参考方案1】：事实证明，错误比看起来更简单。在检查 CSS 验证器上的错误时：https://jigsaw.w3.org/css-validator/ 我发现几个地方的 CSS 中有多余的字符，这些字符不应该存在，并且很可能在 IOS 设备（版本 10 下）上中断。一旦这些被删除，“IOS 不加载 CSS”问题就消失了。
【讨论】：
【参考方案2】：你的链接href在我看来不正确：
<link rel="stylesheet" id="dashicons-css" href="//www.staging.maxbotix.com/wp-includes/css/dashicons.min.css" type="text/css" media="all">我认为您需要包含 https://
各种浏览器可能对此更加挑剔。
【讨论】：
我认为 ( // ) 现在应该是首选标准。我相信 wp-rocket 插件正在改变这一点。我可以尝试将其关闭以查看是否有影响，但在添加插件之前我遇到了问题，所以我认为这不会解决问题。以上是关于CSS 未在 IOS < ver 10 设备上加载的主要内容，如果未能解决你的问题，请参考以下文章
未在 iOS 10 上为基于 XCode 7.3 构建的应用程序生成设备令牌
amp 应用程序横幅未在 android 和 IOS 设备中正常显示