iphone 我的移动网站加载不一致

Question

我正在开发一个移动网站模板，但我不确定为什么它有时会在我的 iphone 上正确加载而其他时候只加载 body（空白背景我将 body 设置为海军蓝）。我的代码中的一些警报按预期出现，但其余容器和 header 有时根本不会加载，但有时它会在不更改任何代码的情况下完美加载。这是不一致的，很难弄清楚。但它始终可以毫无错误地加载到我的桌面上。关于我的代码：我加载了一个提供给所有设备的 css 文件。在此文件中，header 是绝对位置，container_wrapper 或 body 上没有设置高度。在一个 js 文件中，我调用了一个方法来检查浏览器是否支持溢出：滚动。如果它确实支持，那么文档会提示 true（目前仅用于调试）。警报对于不同的手机来说是完全正确的。如果它确实支持溢出滚动，我会调用一个方法来添加一些额外的 css 样式，即 body 和 container_wrapper 的高度，并将 header 设置为固定位置。还有一个名为 scrollable 的 class，它允许滚动（使用 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. >= 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. >= 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. >= 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. >= 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. >= 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. >= 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.) === 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>

Answer 1

我现在可以使用了。我已经决定改变一些事情，所以加载的默认 css 页面具有支持 overflow:scroll 的较新型号手机所需的样式。因此，我首先将正文、container_wrappper 和侧边菜单的高度设置为 100%，而不是在收到对检查是否溢出的肯定响应后更改它：支持滚动... 相反，我检查是否不支持溢出滚动，然后如果不支持，我会动态添加一个新的样式表，该样式表具有主体的高度和 container_wrapper 作为高度：自动；而不是 height:100%。似乎是这样，即从 height:100% 更改为 height: auto 正确显示它，而不是我从没有高度开始并在支持溢出滚动时添加 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;
}

在 css 中，对于不支持溢出滚动的手机 main_style_old_phones.css：

body{
    height: auto;
    }
    #container_wrapper{
    height: auto;
    }

    #headernav {    
    position:absolute;
    }

    #swipe_menu_right{
    height: auto;
    }

iphone 我的移动网站加载不一致

my mobile website is loading inconsistently on iphone

html

css

mobile

scroll

overflow