指定ここからは「レスポンシブレイアウト」に関するメモimgサイズは2倍で作成。100%にスポンサーリンクviewportの「width」と「initial-scale」viewportは、スマホなどのデバイスの表示領域や拡大率の指定。HTMLのmeta要素で指定する。他のプロパティは要らないと思う。メディアクエリを指定していないなら、viewportは不要。これで終わってもアレなので、そう思うに至った過程をメモしておきます。content属性のプロパティと値width(表示領域の幅)数値(ピクセル数。200〜10000の範囲で指定。デフォルト=980が一般的らしい。機種によって違うけど)device-width(デバイスの表示領域の幅に合わせる)hight(表示領域の高さ)*普通あまり使わない(デフォがautoだから)数値(ピクセル数。233〜10000の範囲で指定。デフォルト=auto)device-hight(デバイスの表示領域の高さに合わせる)initial-scale(初期スケール)数値(倍率。以内)minimum-scale(最小スケール)数値(倍率。0~10の範囲で指定。デフォルト=0.25)maximum-scale(最大スケール)数値(倍率。0~10の範囲で指定。デフォルト=1.6)user-scalable(ユーザのスケール操作)yes(できる。デフォルト)no(できない)表示領域って?スマホなどのデバイスの画面で、Webページが実際に表示される領域のこと。幅980pxが標準的なデフォルトサイズだとか。機種によって違うんだけど。左右980pxのWebページが(縮小表示されて)左右ピッタリに納まるのがデフォルトらしい。指定してやる、という理屈みたい。幅320pxとは初代iPhone〜3GSまでの縦持ちのデバイス幅。Displayになり解像度は倍に。物理サイズはあまり変わらないので幅320pxのままで考え、画像だけは倍のサイズにすればOK。物理サイズも大きくなっているので要注意。上の表のたくさんあるプロパティのうち「どれを指定するのが最適?」と迷って調べてみた。書かない」か「width=数値」だけにするか「initial-scale=1」だけかのいずれかが良いという記事を読んだ。Safariでの縦持ち・横持ち(Portrait・Landscape)で矛盾が生じる。異なるので使わないほうが良いという。IEは「initial-scale」に未対応。AndroidのChromeでは、viewport未設定か、content属性が「width=数値」のとき、文字が拡大表示されるという事象もあるという。SEOモード各デバイス(のブラウザ)によって、viewportで指定していないプロパティは、自動的に推測するらしいし、それぞれにバグもあるようだ。viewportをどうしているのかを見てみた。記述無し(PCサイトをそのままスマホでも表示。切り替えではなかったこと。メディアクエリを使用。メディアクエリを使わず、PCサイトをスマホでもそのまま表示。PCサイトとスマホサイトは別HTMLファイル。「width」と「initial-scale」を同時指定してるやん!Appleは、スマホ専用サイトは作らず、メディアクエリを非常に丁寧に作ってる。スマホ表示も美しく好印象。Organizerで解凍して。公式サイトも「width」と「initial-scale」を同時指定している。user-scalable=no(初期表示100%。最小サイズも、最大サイズも100%。ユーザによる拡大縮小はダメ)には違和感。(拡大して見たい時もある。スマホではそれができるもんだと思っているユーザも多いはず)Appleサイトと同じく1カラムで作っているが、なぜピンチもできないようにしたのか疑問。Phoneも1カラムで作っている。スマホでも横持ちなら文字の可読性あり。計算して作っていて美しく、好印象。メディアクエリが無くても十分な例。使い方パターン2つ上記の参考サイトを見たり、自分でいろいろ実験した結果、今のところ以下の2つの方法が最適だと思う。不要PC用ページをスマホなどのデバイスでそのまんま表示するなら、viewport不要。(もちろんメディアクエリなど設定していないはず)viewportを下手に指定すると、妙な拡大表示になったり、背景が切れるなどの面倒が。この場合のレイアウトは、スマホなどのデバイスでも見やすいように考慮すべき。(1カラムにするなど。2カラムでもイイが、とにかく小ちゃい画面でも見やすいかどうか。「width=device-width」と「initial-scale=1」同時を指定でOK。ほかのプロパティはユーザビリティを考えると不要よね。float解除し1カラムにするなど。スマホビューで、ピンチアウトしなくても「読める」ようにしておくこと。1カラム(しかも、カラムの幅はパーセント指定)にしておけば「width=device-width(=各デバイス独自の横幅)」と「initial-scale=1(初期拡大率は原寸)」を同時指定しても問題なく表示するはず。指定はとりあえず解決ってことで。本サイトも「width=device-width」と「initial-scale=1」を指定している。状況が変わったらまた更新記事を書きます。以降は、レスポンシブレイアウトでの、その他のメモ。Queriesの条件分岐とブレイクポイントについてモーダルウィンドウ(ポップアップウィンドウ)をjQueryとCSSで簡単に作る手順プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。jQuery、WordPressなど、Webデザイン関連をメモっていく覚え書きサイトです。Reserved.^。