@viewport and @media query

本当に今更なんだけど。 yomoyomo さんの記事見て「viewport って Safari 専用じゃないんだ」と気がついた。 W3C の Validator で

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

でチェックしてみたが怒られなかったので，もう標準と言っていいのだろう。（私は W3C の Validator で OK ならよしとしている。細かいことを言ってたらきりがないので）

何故か viewport の width は既定で980になってるらしい。どーりで通常のサイトをスマホのブラウザで眺めたらやたら小さく表示されると思ったよ。これって仕様上のバグじゃねーの。ふつう既定で width=device-width にしとくもんじゃねーの？

で，あとはこの width 値を使って画面をチューニングすればいい。私の場合は

/* condition of medeia */
@media screen and (min-width: 750px) {
  html, body {
    color: black;
    background-color: #FFF8E7; /* Cosmic Latte: http://www.pha.jhu.edu/~kgb/cosspec/ */
  }
  #sidebar {
    display: block;
  }
}
@media screen and (max-width: 749px) {
  html, body {
    color: black;
    background-color: white;
  }
  #sidebar {
    display: none;
  }
}

という感じで，幅が小さくなったらサイドバーを非表示にするようにした。これは PC のブラウザでも試せるので，よかったら遊んでみてください。

ただし，ページの横幅は 480 を最小値にしてある。これ以上小さくなるとさすがにレイアウトが壊れる。最近のスマホは大概 480 以上あるみたいなのでそんなに酷いことにはならないだろう。

さらに CSS では @viewport を策定中らしい。

CSS Device Adaptation (Editor's Draft 11 October 2013)
@viewport - CSS | MDN

これを使えば min-width とか指定できるようになるのだが， CSS Validator の方がまだ未サポートらしい。なので今回は @viewport は見送った。

とりあえずトップページと Movable Type で管理してるページは viewport に対応した。それ以外の手書きのページは隙を見て対応することにする。