スマホサイトtips

android4.1とかだと下記のようなCSS3のbackground省略記法が使えない

background: url(img/xxx.jpg) 50% 50% / contain no-repeat;

だから、わけてかきましょうね！

background: url(img/xxx.jpg) 50% 50% no-repeat;
background-size: contain;

ちなみに、背景を複数指定したいときはこんなふうにすればいい

background: url(img/xxx.jpg) 50% 50% no-repeat, url(img/yyy.jpg) 100% 100% repeat;
background-size: cover, 100% 100%;

拡大縮小可能かつ横向きにしても文字サイズが変わらない指定

viewportはこれ

<meta name="viewport" content="width=device-width,initial-scale=1.0">

cssはこれ

body {
  -webkit-text-size-adjust: 100%;
}

子要素の高さがわからなくても上下揃えしたいとき

html

<div class="hoge">
  <div class="hogehoge">
    <img src="img/zzz.jpg">
    <p>test</p>
  </div>
</div>

css

.hoge {
  position: relative;
  width: 100%;
  height: 100%;//なんかしら高さがないとだめ
}
.hogehoge {
  position: absolute;
  top: 0;//上にひっぱる
  bottom: 0;//下にひっぱる
  margin: auto;//要素が揃う
}

imgタグでbackground-size: cover; を再現したい

html

<div class="container">
  <img src="img/aaa.jpg">
</div>

css

.container {
  position: relative;
  overflow: hidden;
}
.container > img {
  position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

CSSはクソです