The iphone browser crashes when it comes to exceptions and failures (directly post code ).
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> fixed solution </title>
<Script src = "../jsDemo/jquery-1.8.2.min.js? 3393 "> </script>
<Style>
*{
Margin: 0;
Padding: 0;
}
Html {
Width: 100%;
Background-color: plum;
}
Body {
Position: fixed;
Top: 0;
Left: 0;
Width: 100%;
Height: 100%;
}
. Other {
Position: fixed;
Width: 100%;
Height: 5rem;
Line-height: 5rem;
Text-align: center;
Background-color: orangered;
Z-index: 10000;
}
. Container2 {
Width: 100%;
Height: 100%;
Margin-top: 5rem;
Margin-bottom: 3rem;
Box-sizing: border-box;
Background-color: greenyellow;
}
. Container2. item {
Height: 4rem;
Line-height: 4rem;
Text-align: center;
Border-bottom: solid 2px gray;
}
. Button {
Position: fixed;
Bottom: 0;
Width: 100%;
Height: 3rem;
Line-height: 3rem;
Text-align: center;
Background-color: # 00b3ee;
}
</Style>
</Head>
<Body>
<Div class = "other"> other </div>
<Div class = "container2" id = "container2">
<Div>
<Div class = "item"> project 0 </div>
<Div class = "item"> Project 1 </div>
<Div class = "item"> Project 2 </div>
<Div class = "item"> Project 3 </div>
<Div class = "item"> Project 4 </div>
<Div class = "item"> Project 5 </div>
<Div class = "item"> Project 6 </div>
<Div class = "item"> Project 7 </div>
<Div class = "item"> Project 8 </div>
<Div class = "item"> Project 9 </div>
</Div>
</Div>
<Div class = "button"> button </div>
<Script src = "http://momo-project.b0.upaiyun.com/Assets/IOS_FIXED/iscroll-infinite.js"> </script>
</Body>
</Html>
<Script type = "text/javascript">
Function resetFontSize (){
If (navigator. userAgent. indexOf ('mobile ')! =-1 ){
Document.doc umentElement. style. fontSize = document.doc umentElement. clientWidth/1440*100 + 'px ';
} Else {
Document.doc umentElement. style. fontSize = document.doc umentElement. clientHeight/1440*50 + 'px ';
}
}
Window. addEventListener ('resize', resetFontSize, false );
ResetFontSize ();
Var $ container2 = document. querySelector ('. container2 ');
Var $ other = document. querySelector ('. other ');
Var $ button = document. querySelector ('. click ');
$ Container2.style. height = (document.doc umentElement. clientHeight-$ other. clientHeight-$ button. clientHeight) + 'px ';
Var myScroll = new IScroll ('# container2 ',{
MouseWheel: true,
Scrollbars: true
});
</Script>