読者です 読者をやめる 読者になる 読者になる

ヤハタブ

Mac iPad Vape 水泳が好きな脱サラ30代の気ままな日記。

Twitter BootstrapとレスポンシブとViewport

Web製作 Twitter Bootstrap

Bootstrapで簡単レスポンシブ

自分は個人的にレスポンシブは今後益々必須になると思っているのだけど、Bootstrapなどのresponsive.css等をそのまま使った場合に適用されるiPad等の768pxで適用されるタブレットビューが中途半端でどうにも気持ち悪いと感じる。うちの奥さんにどう思うと聞いても「んー混乱する」みたいな事を言っていて、あとお客さんにもどうも受けが悪い。

タブレット最適化は客受け悪かったので辞める事に

お客さんに「iPadで見た時にパソコンと違うんだけど?」と言われて、「iPadのサイズでも見やすいサイズでして...」とか答えても、なんか気持ち悪い。単にresponsive.cssを適用して微調整しただけですみたいなのが自分にあるし、そもそも自分が良いと思っていないので、タブレット利用時は縦向き(ポートレート表示)と横向き(ランドスケープ表示)どちらもPCと同じになるように統一した。

BootStrap調整し始めたらMedia Queryでハマった

普通にBootstrapで組んでresponsive.css使ってる時には出ない状態でけっこうハマった。1280px以上で更にwidthが広がるのもむず痒いので外して、@media (max-width: 768px)の設定を解除して調整して整ってきたなと思っていたら、タブレットでばっちりになるとiPhoneでの表示が崩れる。iPhoneの表示とiPadの表示を調整してこれは素晴らしいと思って悦に浸っている時にiPadを横向きにしたり縦向きにしたりすると倍率が崩れる。。。

そこである疑問が。 「そもそもviewportを共用してiphoneiPadのレスポンシブの表示振り分け出来るのかな?(俺の知識で)」

initial-scaleで初期倍率を指定した状態だと、回転させた時スクロールが出たり、縮小し過ぎたりとハマったので最初からinitial-scaleは省いておくのがポイント。という記事もあったので「iPhoneとiPadでviewportを分けるJavascript」を参考に、

var d = window.document; if(navigator.userAgent.indexOf('iPhone') > -1) d.write('<meta name="viewport" content="width=device-width; initial-scale=1.0;">'); else if(navigator.userAgent.indexOf('iPad') > -1) d.write('<meta name="viewport" content="width=1024;">');

滑らか。。。iPadを何度も何度も回転させて見てしまうくらいに滑らか。あー良かった。

Bootstrapを全部理解するのは難しいけれども、幾つも繰り返しBootstrapを使って作って気付くこともあるなーとしみじみ。