fixed_sp

last update: 2014/11/15

<!doctype html>
<html>
<head>
<title>fixed_sp</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrap {
  position: relative;
}
.head {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: #ddd;
  opacity: 0.9;
}
</style>
</head>
<body>
<div class="wrap">
  <div class="head">head</div>
  <div class="content">content<br>...</div>
  <div class="foot">foot<br>...</div>
</div>
</body>
</html>

code_popup

sample

(NG)
Android 2.3.6 GALAXY SⅡ LTE SC-03D -> headが遅れて追従
Windows Phone 7.10.8 IS12T -> headが追従しない

(OK)
iOS 6.0.1 iPhone 4S
iOS 7.0.4 iPhone 5
Android 2.3.4 XPERIA ray SC-03C
Android 4.0.4 GALAXY SⅢ SC-06D
Android 4.0.4 ARROWS Z ISW13F
Android 4.1.2 XPERIA Z SO-02E
BlackBerry 7.1.0 Bold 9900