Position corrigée ne fonctionnant pas dans le navigateur mobile

Comment faire de la position de l'élément fixe dans navigateur Mobile (ios et android) ?
Élément défile toujours avec le code ci-dessous dans ios < 5 et android< 4

<html>
 <head>
<style>
     .fixed{
      position:fixed;
      top:0;
      left:0;
    }
</style>
</head>
<body>
     <div class="fixed">
     Hi I m Position Fixed 
     </div>
    <div>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>

    </div>
</body>
</html>

source d'informationauteur Vicky Gonsalves

  1. -1

    Si c'est seulement dans un navigateur mobile et vous n'avez pas besoin de rétro-compatibilité pour iOS et blackberry, vous pouvez utiliser une requête de média.

    @media only screen and (max-device-width : 730px) {
    .fixed {
        position:fixed;
        top:0;
        left:0;
    }
}
  2. -1

    vous pouvez également utiliser position:absolute pour faire de l'en-tête fixe essayer..

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Web App Template</title>
<style type="text/css" media="all">
body,ul,li {padding:0;margin:0;border:0;}
body {font-family:helvetica;}
header{background-color:#deb500;position:absolute;z-index:2;top:0; left:0;width:100%;height:45px;padding:0;}
footer {background-color:#c27b00;position:absolute;z-index:2;bottom:0; left:0;width:100%;height:48px;padding:0;border-top:1px solid #444;}
header, footer{font-size:20px;text-align:center;color:#f3f3f3;font-weight:bold;text-shadow:0 -1px 0 rgba(0,0,0,0.5);line-height:45px;}
#wrapper {position:absolute;z-index:1;top:45px; bottom:48px; left:0;width:100%;background:#aaa;overflow:auto;}
#scroll-content {position:absolute;z-index:1;width:100%;padding:0;}
ul {list-style:none;padding:0;margin:0;width:100%;text-align:left;}
li {padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px;}
</style>
</head>
<body>
<header>Web App Template</header>
<div id="wrapper">
<div id="scroll-content">
<ul>
<li>Some Stuff</li>
<li>More Stuff</li>
<li>Big Stuff</li>
<li>Small Stuff</li>
<li>Geek Stuff</li>
<li>Nerd Stuff</li>
<li>Fast Stuff</li>
<li>Slow Stuff</li>
<li>Good Stuff</li>
<li>Bad Stuff</li>
<li>Your Stuff</li>
<li>My Stuff</li>
<li>Their Stuff</li>
<li>Our Stuff</li>
<li>Super Stuff</li>
<li>Uber Stuff</li>
<li>Stuff Stuff</li>
<li>French Stuff</li>
<li>German Stuff</li>
<li>English Stuff</li>
<li>American Stuff</li>
<li>Stuff</li>
</ul>
</div>   
</div>
<footer>Some Footer Content</footer>