忍者ブログ
20 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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