body幅の切り替え

色々やった結果、最終的に以下に落ち着く。

/*
 ① スマホ
*/
body { width:100%; }

/*
 ② タブレット
*/
@media only screen and (min-device-width:481px) {
    body { min-width:768px; }
}

/*
 ③ PC
*/
@media only screen and (min-device-width:769px) {
    body { min-width:1024px; }
}

タブレットは768px以上にして、あとは幅600pxとかのAndroidタブレットなんかはスケーラーにお任せな感じ。
結局の所800pxとか980pxとかに対応しても良いのだけど。幅広のデザインの場合かなり無理が来てしまうので、もうスクロールバーで良いんじゃね?っていう考え。
まぁもし対応しろって言われたら対応するって感じでいいかもしれないと思う今日このごろです。
PCのmin-widthが1024pxなのは、iPad PROに合わせてる感じ。逆に言えばこのサイズできちんと見えるレイアウトにしなければならない。
min-device-widthを使ってるので、PCは③一択。

カテゴリーCSS3

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です