Das wird schwierig für mich zu erklären, aber ich werde versuchen: Zum Anfang arbeitet meine Webseite auf mobilebrowser in iOS6.x, Android, W7 und Desktop-Browser IE9, Safari und Chrome. Das Problem tritt in Apples mobilem Safari-Browser in iOS7 auf. Ich hatte ein Problem mit einem sticky footer und der virtuellen Tastatur, aber das wurde gelöst hereScrollen Probleme auf einer Webseite mit fester Kopf- und Fußzeile in iOS7
Jetzt habe ich ein Problem beim Scrollen auf der Seite. Wenn Sie nach unten scrollen, wird normalerweise die Navigationsleiste ausgeblendet und die Adressleiste wird auf iOS7 verkleinert. Das passiert nicht. Der Inhalt zwischen der festen Kopf- und Fußzeile wird geblättert, aber die Fußzeile des Inhalts wird von der Fußzeile und der Navigationsleiste überlagert. Ich muss warten, bis das Scrollen aufhört, bevor ich wieder runterscrollen kann. Dann schrumpft die Adressleiste, die Navigationsleiste wird ausgeblendet und der untere Inhalt wird angezeigt. Wenn ich am unteren Rand meiner Seite bin und nach oben scrollen möchte, passiert das Gleiche, nur aufwärts: Scrollt man nach oben, überlappen sich die Kopfzeile und die winzige Adresszeile mit dem oberen Inhalt, warte auf das Scrollen Scrollen Sie erneut, um die Adressleiste zu erweitern, die Navigationsleiste anzuzeigen und den oberen Inhalt anzuzeigen. Hoffnung dieses Bild helfen kann:
Hier sind einige der CSS-Code:
*
{
margin: 0; padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html, body {
height: 100%;
margin: 0;
}
body{
font-family: Helvetica, Segoe UI, Arial, Sans-Serif;
font-size: 130%;
background-image: url('../images/background.png');
background-repeat:repeat;
overflow:hidden;
}
#header
{
text-align: center;
color:#FFF;
height: 45px;
position:fixed;
z-index:5;
top:0px;
width:100%;
top:0; left:0;
padding:0;
background-color:#2785c7; /* Old browsers */
background: -moz-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* IE10+ */
background: linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* W3C */
background: -webkit-gradient(linear, left top, left bottom, from(#206493), to(#2375ae), color-stop(85%, #2785c7)); /* Chrome,Safari4+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493', endColorstr='#2785c7',GradientType=0); /* IE6-9 */
}
#footer{
color:#CCC;
height: 48px;
position:fixed;
z-index:5;
bottom:0px;
width:100%;
padding-left:2px;
padding-right:2px;
padding:0;
border-top:1px solid #444;
background:#222; /* Old browsers */
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */
background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
background: linear-gradient(top, #999, #666 2%, #222); /* W3C */
}
#footer > div
{
height:48px; width:52px;
color:#AAACAF;
text-align:center;
font-size:0.55em;
display:inline-block;
cursor:pointer;
}
@media screen and (max-width: 350px) /* Mindre skift på mobil enheder */
{
#footer > div
{
width:48px;
font-size:0.40em;
}
}
#scroller
{
/* min-height: 360px;*/
padding-top:45px;
padding-bottom:48px;
overflow:hidden;
width:100%;
}
Und hier einige der HTML sind:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/name.png" />
<link rel="apple-touch-startup-image" href="images/startup.png" />
<link rel="shortcut icon" href="/images/name.ico" />
<link href="css/style.css?square=#VERSION" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js?square=#VERSION" type="text/javascript"></script>
<script src="js/jquery.placeholder.js?square=#VERSION" type="text/javascript"></script>
<script src="js/javascript.js?square=#VERSION" type="text/javascript"></script>
<script src="js/divScroll.js?square=#VERSION" type="text/javascript"></script>
<script>
$(function() {
$('input[placeholder], textarea[placeholder]').placeholder();
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<div id="header" style="line-height:45px;" runat="server">
Name
</div>
<div id="scroller" >
<div id="content">
...
...
...
</div>
<div id="footer" style="text-align:center">
<div id="LoginNameLogoDiv"><img alt="Company" src="images/company_logo.png" /></div>
</div>
</form>
</body>
</html>
Relevante Artikel: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs –