我正在开发一个移动网站模板，我不确定为什么有时它会在我的iphone上正确加载，有时它只会加载身体（一个空白的背景，海军色我将身体设置为）。我的代码中的一些警报按预期出现，但其余的容器和标题根本没有加载，但有时它会在没有更改任何代码的情况下完全加载。这是不一致的，很难弄明白。但它总是在我的桌面上加载而没有错误。 关于我的代码： 我加载了一个css文件，该文件提供给所有设备。在此文件中，标题是绝对位置，并且container_wrapper或正文上没有设置高度。 在一个js文件中，我调用一个方法来检查浏览器是否支持overflow：scroll。 如果它支持，则文档警告为真（仅用于此刻的调试）。警报对于不同的手机来说非常正确。 如果它确实支持溢出滚动我然后调用一个方法，它添加一些额外的CSS样式，即身高和container_wrapper的高度，并将标题设置为固定位置..还有一个名为scrollable的类，它允许滚动（使用CSS样式）容器div和侧面菜单div。如果有人对为什么加载不一致有任何想法，我将不胜感激。我附上了3张图片。没有正确加载时的第一个空白页面和正确加载时的后两个空白页面。
谢谢......继承人我的css。
body{
margin-top: 0px;
font-family:Arial,Helvetica,sans-serif;
width: 100%;
overflow: auto;
background: #120F3A;
}
#container_wrapper{
position: absolute;
left: 0px;
top: 0px;
display: block;
margin: 0 auto;
width: 100%;
background: #120F3A;
overflow: auto;
max-width: 100%;
z-index: 2;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
#container{
position: relative;
overflow: hidden;
z-index: 2;
}
/********************************************/
/*Styling for header and drop down menu. Used on every page */
header{
width: 100%;
}
header nav{
width: 100%;
}
#headernav {
width: 100%;
position:absolute;
top: 0px;
left: 0px;
z-index: 10;
background: #000;
padding-bottom: 2px;
-webkit-transition: .3s; /* Safari */
transition: .3s;
}
#swipe_menu_right{
display: block;
width: 80%;
max-width: 80%;
position:absolute;
background: #120F3A;
top: 0px;
left: 20%;
padding: 0px 0px 0px 0px;
z-index:1;
overflow: auto;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
#header_right{
display: none;
z-index: 600;
width: 25%;
position: fixed;
overflow: hidden;
left: -5%;
}
.scrollable{
overflow: scroll;
-webkit-transition-property: top, bottom;
-moz-transition-property: top, bottom;
-o-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: .2s, .2s;
-moz-transition-duration: .2s, .2s;
-o-transition-duration: .2s, .2s;
transition-duration: .2s, .2s;
-webkit-transition-timing-function: linear, linear;
-moz-transition-timing-function: linear, linear;
-o-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
-webkit-overflow-scrolling: touch;
}
#menu_list{
position: relative;
overflow: hidden;
}
#menu_list .accordian_nav{
margin-top: 0px;
padding-top: 0px;
}
#menu_list .accordian_nav ul{
width: 94%;
margin-left: 6%;
}
#menu_list .menu_level_1{
width: 95%;
margin: 0px 0% 0px 0%;
border: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
}
和一个名为js_functions的Js文件，我在加载css后加载它。
$(document).ready(function(){
try{
if((sessionStorage.getItem("canScroll") != 'false') && (sessionStorage.getItem("canScroll") != 'true')){
if(canOverflowScroll()){
alert('true');
changeCssOnDocReady();
sessionStorage.setItem("canScroll", "true");
}else{
alert('false');
sessionStorage.setItem("canScroll", "false");
}
}else if(sessionStorage.getItem("canScroll") == 'true'){
changeCssOnDocReady();
}
}catch(error){
alert(error.message);
}
});
function changeCssOnDocReady(){
alert(' csstrue');
$('body').css({
'height': '100%'
});
$('#container_wrapper').css({
'height': '100%'
});
$('#swipe_menu_right').css({
'height': '100%'
});
$("#headernav").css({
'position': 'fixed'
});
alert('wrapper height' + $('#container_wrapper').height());
}
function canOverflowScroll() {
return (
// Features-first. iOS5 overflow scrolling property check - no UA needed here. thanks Apple :)
"WebkitOverflowScrolling" in window.document.documentElement.style ||
// Touch events aren't supported and screen width is greater than X
// ...basically, this is a loose "desktop browser" check.
// It may wrongly opt-in very large tablets with no touch support.
window.screen.width > 1200 ||
// Hang on to your hats.
// Whitelist some popular, overflow-supporting mobile browsers for now and the future
// These browsers are known to get overlow support right, but give us no way of detecting it.
(function() {
var ua = window.navigator.userAgent,
// Webkit crosses platforms, and the browsers on our list run at least version 534
webkit = ua.match(/AppleWebKit\/([0-9]+)/),
wkversion = webkit && webkit[1],
wkLte534 = webkit && wkversion >= 534;
return (
/* Android 3+ with webkit gte 534
~: Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13 */
ua.match(/Android ([0-9]+)/) && RegExp.$1 >= 3 && wkLte534 ||
/* Windows Phone
~: Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) */
ua.match(/IEMobile\/(\d\d).\d+/) && RegExp.$1 >= 10 ||
/* Blackberry 7+ with webkit gte 534
~: Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0 Mobile Safari/534.11+ */
ua.match(/ Version\/([0-9]+)/) && RegExp.$1 >= 0 && window.blackberry && wkLte534 ||
/* Blackberry Playbook with webkit gte 534
~: Mozilla/5.0 (PlayBook; U; RIM Tablet OS 1.0.0; en-US) AppleWebKit/534.8+ (KHTML, like Gecko) Version/0.0.1 Safari/534.8+ */
ua.indexOf(/PlayBook/) > -1 && RegExp.$1 >= 0 && wkLte534 ||
/* Firefox Mobile (Fennec) 4 and up
~: Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0 */
ua.match(/Firefox\/([0-9]+)/) && RegExp.$1 >= 4 ||
/* WebOS 3 and up (TouchPad too)
~: Mozilla/5.0 (hp-tablet; Linux; hpwOS/3.0.0; U; en-US) AppleWebKit/534.6 (KHTML, like Gecko) wOSBrowser/233.48 Safari/534.6 TouchPad/1.0 */
ua.match(/wOSBrowser\/([0-9]+)/) && RegExp.$1 >= 233 && wkLte534 ||
/* Nokia Browser N8
~: Mozilla/5.0 (Symbian/3; Series60/5.2 NokiaN8-00/012.002; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/533.4 (KHTML, like Gecko) NokiaBrowser/7.3.0 Mobile Safari/533.4 3gpp-gba
~: Note: the N9 doesn't have native overflow with one-finger touch. wtf */
ua.match(/NokiaBrowser\/([0-9\.]+)/) && parseFloat(RegExp.$1) === 7.3 && webkit && wkversion >= 533
);
})()
);
}
我的HTML代码：
<body ontouchstart="">
<div id="header_right">
<span class="more_button_swipe"><i class="fa fa-navicon"></i></span>
</div>
<div id="swipe_menu_right" class="scrollable">
<div id="menu_list">
<div class="header_side_menu"><h3>Menu</h3></div>
<ul class="accordian_nav">
<li><span class="menu_level_1 block"><i class="fa fa-headphones icon_width"></i>Audio<i class="fa fa-plus-square plus_minus_arrow"></i></span>
<ul>
<li><a class="menu_level_2 ableton_music_link" href="music-production.php#">Music Production<i class="fa fa-chevron-right"></i></a></li>
<li><a class="menu_level_2 dj_techniques_link" href="techniques.php">Techniques Cert.<i class="fa fa-chevron-right"></i></a></li>
<li><a class="menu_level_2" href="#">DJ Techniques Cert.<i class="fa fa-chevron-right"></i></a></li>
</ul>
</li>
<li><span class="menu_level_1 block"><i class="fa fa-gamepad icon_width"></i>Games<i class="fa fa-plus-square plus_minus_arrow"></i></span>
<ul>
<li><a class="menu_level_2" href="music-production.php#">3D Game<i class="fa fa-chevron-right"></i></a></li>
</ul>
</li>
<li><span class="menu_level_1 block"><i class="fa fa-laptop icon_width"></i>I.T.<i class="fa fa-plus-square plus_minus_arrow"></i></span>
<ul>
<li><a class="menu_level_2" href="music-production.php#">D Programming<i class="fa fa-chevron-right"></i></a></li>
<li><a class="menu_level_2" href="music-production.php#">D C Proamming<i class="fa fa-chevron-right"></i></a></li>
</ul>
</li>
<li><a class="menu_level_1 vouchers_link"><i class="fa fa-gift icon_width"></i>Voucher Deals<i class="fa fa-chevron-right"></i></a></li>
<li><a class="menu_level_1 about_link" href="about-us.php#"><i class="fa fa-info-circle icon_width"></i>About Us<i class="fa fa-chevron-right"></i></a></li>
<li><a class="menu_level_1 contact_link" href="contact-us.php#"><i class="fa fa-envelope icon_width"></i>Contact Us<i class="fa fa-chevron-right"></i></a></li>
</ul>
</div>
</div>
<div id="container_wrapper" class="scrollable">
<header>
<nav>
<ul id="headernav">
<li><a href="index.php#"><i class="fa fa-home"></i></a></li>
<li><a href="location.php#"><i class="fa fa-map-marker"></i></a></li>
<li><a href="tel:[00353872237667]"><i class="fa fa-phone"></i></a></li>
<li><span class="more_button_swipe"><i class="fa fa-navicon"></i></span></li>
</ul>
</nav>
</header>
<div id="container">
<div id="swipe_sidebar_right"></div>
<div id="logo_wrapper">
<img class="logo" src="images/logo-virtu.jpg" height="65" width="150" alt="Logo"/>
<h2>Contact</h2>
</div>
<div id="content">
<div id="background_grey">
<section id="form_area" class="content_box">
</section><!--End of form_area-->
</div><!--End of background_grey-->
</div><!--End of content-->
</div><!--End of container-->
</body>
答案 0 :(得分：0)
我现在正在工作。 我决定改变一些东西，所以加载的默认css页面具有支持溢出的新型号手机所需的样式：滚动。所以我将body，container_wrappper和side menu的高度设置为100％，而不是在收到肯定溢出后的肯定响应后更改它：支持滚动... 相反，我检查是否不支持溢出滚动，然后如果不支持我动态添加一个新的样式表，其高度为body和container_wrapper为height：auto;而不是高度：100％。似乎这种方式，即从高度变化：100％到高度：自动正确显示它，而不是我从没有高度开始的方式，如果支持溢出滚动，则增加100％的高度...它是加载东西的速度，但当我这样做，即使加载第二个样式表有一个延迟，它仍然在加载后正确显示。 所以我将以下代码添加到我的脑海：
<link rel="stylesheet" type="text/css" href="css/main_style_new_phones.css"/>
<script>
if(!canOverflowScroll()){
var lnk=document.createElement('link');
lnk.href='css/main_style_old_phones.css';
lnk.rel='stylesheet';
lnk.type='text/css';
(document.head||document.documentElement).appendChild(lnk);
}
这是main_style_new_phones.css中的css
body{
margin-top: 0px; /*moves #container right up to top of page so no gap*/
font-family:Arial,Helvetica,sans-serif;
width: 100%;
overflow: auto;
z-index: 1;
height: 100%;
}
#container_wrapper{
position: absolute;
left: 0px;
top: 0px;
display: block;
margin: 0 auto;
width: 100%;
background: #120F3A;
overflow: auto;
max-width: 100%; /*same width as full logo image width so that when on full screen the background color of the container doesn't spread across*/
z-index: 4;
-webkit-transition: .3s; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
-moz-transition: .3s;
-o-transition: .3s;
transition: .3s; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
height: 100%;
}
#headernav {
width: 100%;
position:fixed;
top: 0px;
left: 0px;
z-index: 10;
background: #000;
padding-bottom: 2px;
-webkit-transition: .3s; /* Safari */
transition: .3s;
}
以及在main_style_old_phones.css中不支持溢出滚动的手机的CSS：
body{
height: auto;
}
#container_wrapper{
height: auto;
}
#headernav {
position:absolute;
}
#swipe_menu_right{
height: auto;
}