25
August
レスポンシブデザイン時にする基本設定
http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/
これを書かないと画面が縮小されなかった
ピンチできない大手サイトって結構ある
縦横で倍率可変okな設定にすると、レイアウトがめんどそう
ガタガタいわれたくないときは強制的に拡大縮小不可！
リキッドレイアウトなら絶対これのほうがいい。
リキッドにせず、横幅320px固定ならピンチok設定でいいと思う。
・横向きのときは文字数を増やしたい場合
（ピンチで拡大縮小できない）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
・縦横どちらのときでも1行の文字数他レイアウトをまったく同じにしたい場合
（横になると画像も文字も横幅にあわせて拡大される）
（横向きで極端に拡大される）
<meta name="viewport" content="width=device-width"> ・拡大縮小できつつ、横向きで1行の文字数を増やしたい場合
（縦横で表示倍率が変わってしまう）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
文字サイズ自動調整OFFのcssらしい
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
画像を画面サイズに合わせて縮小するcss
img{
max-width:100%;
height:auto;
}
テキストが変に左によりすぎてる。width指定もmargin・padding指定もしてないのに！
→テキストのbackgroudに画像、もしくはbg-colorを指定すること。そうすると直る。
Android4系？のページの自動調整で勝手に整形されるため。うぜー。
画面サイズごとのcss指定
@media only screen and (max-width:1024px){ }
最近はスマホでも解像度があがっているため、320pxとか640pxとかで見てる人は存在するの？
するだろうけどそんな細かく気にする必要ある？
まとめて小さいサイズはこれだ！ってやったほうが楽じゃない？
つまりレスポンシブデザインを作る時点で、複雑設計をしてはいけない。
私のスマホでなんでちゃんと縮小されないんだろうって悩んでた。
$(window).width()
これで解像度を調べたところ1000いくつとかあって、スマホの見た目のサイズと全然違った。
そりゃ640以下のmediaクエリとかに書き込んでも反映しないはずだよ。
本当の1024サイズと、スマホの画面領域360pxで全然違うじゃん。
なんかもうめんどくせー。
1024以下（タブレット・スマホ）と以上（パソコン）で分けるのが簡単でしょ！
スマホでjsを実行させたくない条件分岐のしかた
http://webpad.felicyle.com/jquery/iphone-js-no/
PR