我已经构建了一个响应式登陆页面,该页面功能正常但在移动设备中无法正常加载。如果我在我的机器上查看页面,窗口大小正常,没有问题。如果函数,滚动和当我将其调整到较小的比例时,CSS会做它的事情。
然而,当我使用浏览器测试它的最小宽度时,或者当我通过iPhone测试时,页面显示为空白。没有图像,没有副本。没有。我已经能够发现任何低于768px宽度的东西都是我遇到问题的地方。
我已经运行了开发工具来尝试缩小范围,但我注意到的第一件事就是我的HTML代码都没有显示出来。
我最初的倾向是背景图像太重了所以我用tinyjpg对它们进行了优化,这使得它们的文件大小降低了,但它并没有影响移动负载。我也尝试去CSS并为每个特定的图像注释掉每一行,但这并没有影响(尽管当我通过开发工具查看时,所有的代码都填充了)。从那时起,我认为它与我的图像无关。我已经尝试从底部开始评论CSS的块(max-width 420的指令)但是再次没有真正的影响。
https://jsfiddle.net/snottrocket/4tqytLws/
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Demo - Simple responsive parallax website tutorial</title>
<meta name="description" content="descriptive content here">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://review.bkv.com/BKV/2015/EmailTimelineLander/css/normalize.css">
<link rel="stylesheet" href="https://review.bkv.com/BKV/2015/EmailTimelineLander/css/main_SO.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
</head>
<body class="loading">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<ul id="nav">
<li><a href="#slide-2"><span></span></a></li>
<li><a href="#slide-3"><span></span></a></li>
<li><a href="#slide-4"><span></span></a></li>
<li><a href="#slide-5"><span></span></a></li>
</ul>
<ul id="nav-list">
<li>1971</li>
<li>1978</li>
<li>1991</li>
<li>1992</li>
</ul>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg">
<div class="hsEgg" id="eggBg1">
<div class="hsContainer">
<div class="hsContent">
<h2>The History of Email</h2>
<div id="redbar"> </div>
<article id="history">You probably get dozens upon dozens delivered to your inbox everyday. Some expected, some unexpected, and some downright spooky. But do we ever stop and think about where email marketing all began? Let’s go back. Way back. </article>
</div>
</div>
</div>
</div>
</section>
<section id="slide-2" class="homeSlide">
<div class="bcg">
<div class="hsEgg" id="eggBg2">
<div class="hsContainer">
<div class="hsContent">
<h1>1971</h1>
<div id="redbar"> </div>
<h2>You've Got Mail</h2>
<article id="history">Ray Tomlinson sends the first-ever email while working on ARPANET, the government’s precursor to the Internet.</article>
</div>
</div>
</div>
</div>
</section>
<section id="slide-3" class="homeSlide">
<div class="bcg">
<div class="hsEgg" id="eggBg3">
<div class="hsContainer">
<div class="hsContent">
<h1>1978</h1>
<div id="redbar"> </div>
<h2>The Spam Father</h2>
<article id="history">Gary Thuerk, marketing manager at Digital Equipment Corporation, sends the first mass-marketing email to 400 users and it generated $13 million in sales.</article>
</div>
</div>
</div>
</div>
</section>
<section id="slide-4" class="homeSlide">
<div class="bcg">
<div class="hsEgg" id="eggBg4">
<div class="hsContainer">
<div class="hsContent">
<h1>1991</h1>
<div id="redbar"> </div>
<h2>Happy birthday, internet</h2>
<article id="historyC">The Internet hits the scene and changes the world forever.</article>
</div>
</div>
</div>
</div>
</section>
<section id="slide-5" class="homeSlide">
<div class="bcg">
<div class="hsEgg" id="eggBg5">
<div class="hsContainer">
<div class="hsContent">
<h1>1992</h1>
<div id="redbar"> </div>
<h2>Get it on the go!</h2>
<article id="historyC">Mobile email access is now possible thanks to the first smart phone.</article>
</div>
</div>
</div>
</div>
</section>
</main>
<script>window.jQuery || document.write('<script src="https://review.bkv.com/BKV/2015/EmailTimelineLander/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="https://review.bkv.com/BKV/2015/EmailTimelineLander/js/imagesloaded.js"></script>
<!--<script src="js/enquire.min.js"></script>-->
<script src="https://review.bkv.com/BKV/2015/EmailTimelineLander/js/skrollr.js"></script>
<script src="https://review.bkv.com/BKV/2015/EmailTimelineLander/js/_main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><!--<![endif]-->
<script src="https://review.bkv.com/BKV/2015/EmailTimelineLander/js/jquery.nav.js"></script>
<script>
$(document).ready(function() {
$('#nav').onePageNav();
});
</script>
</body>
</html>
感谢任何帮助。
*编辑 - 添加了actual page
的链接