今日のメモ2017/12/19

昨日の枠が出てしまう問題は一旦置いておく。スマホで確認すると枠が見えない。(PCから確認しようとすると見える) PCのデザインを進めていく段階で探りを入れることにする。

今日はレスポンシブデザインと戦った日だった。 iPhone6の横幅解像度が750pxで、最近はそれ以上の機種もシェアを占めてきたということで、デザイナーは横幅750pxで作業を進めていた。今までは640pxベースだった。

で、用意された画像の横幅は510pxだったのだが、元々の大きさの画像をRetina用に2で割って3をかけたものらしい。 (このプロセスの意味がまだちゃんと理解できていない)

今回、デザイナーに「こんなのつくって」と渡された資料には、横幅を750pxで考えた時にここのマージンは20pxで、画像の大きさは340pxでーと書いてあった。

なんとなくでcssをn%で〜と今までやってきたが、そういうわけにはいかない。

meta viewportをしっかり理解した上でどうするかを考える必要があった。

viewport ->widthで指定された横幅でhtmlを描画する。 width=250としてだったとすると、幅750pxのデバイスで見ると、3倍引き伸ばされて表示されるためのwidthが60pxになる。 viewport width=device-widthとすると、デバイスの長さとしての横幅を取得できる。よって、iPhoneなどでも実際の解像度は750pxでも実機の幅としては375pxの場合、 375pxとして描画してくれるようになる。 Googleはdevice-widthで指定して、その他要素を%で指定する方法を推奨している。 device-widthで指定した(もしくは取得した)数値は$(window).widthなどでも取得できるようになっている。(実際その幅で描画しているということ)

が、今回は750pxの時に〜という絶対値でもらっている。 width=750で対応しても良かったのだが、device-widthを使っておきたかったので jsでdevice-widthをとってきて、750pxとの比を htmlのzoomに入れた。 $('html').css('zoom', $(window).width / 750 ); そうすることで、もらった資料どおりにcssを組み立てられるようになる。

とりあえずスマホ版から作っているが、 windowをリサイズするたびに計算しなおせるようにーということだったので、 $(window).on('resize',function(){ $('html').css('zoom', $(window).width / 750 ); }); ともしておいた。

リキッドデザイン ->ウインドウサイズが変わると、中の要素の大きさも変わるデザインのことレスポンシブデザインは、いろんなデバイスに対応させたデザインのこと

iphoneだと一番下の要素のmargin-bottomが効かない ->android/PCの場合はちゃんとmargin-bottomは効いていた。調べてみたが解決方法がわからなかったので、無理やりもうひとつ下に要素を作って回避。どうにかする方法はないのだろうか...

を思考停止でコピペしていたためにハマった部分 width=750として350のデバイスで表示させようとすると、ズームした状態で表示されてしまう。ピンチアウトすると思った通りのデザインになる。より小さい場合は思った通りに動いてるっぽい。もともと端末の幅が350だったとすると、 viewport=250 ->全ての大きさが, 350/250倍される。 viewport=500 ->全ての大きさが,350/500倍されているが、最初の画面ではみ出してしまう。なぜはみ出すのか、でかなりハマってしまっていた。 ->inisial-scale=1.0を指定していたため。 initial-scaleを消すと思ったように動いてくれた。あとpcではviewport効かない。 chromeならスマホモードにしたら効くようになった。

attrのwidthとcssのwidthの違い？特になし？同時に指定した場合にはcssの方が優先される。

hamburgerメニューを前回canvasにjavascriptから直で書いたが、 cssだけで実装できるようになりたい