Parallaxの表示をiPhoneから見ると写真がfitしていない
・widthで対応できるのか？
・movileやdisplay幅で個別の写真表示の方がいいのか？
昨日Vol.1で書いたとおり、今iPhoneから自分のサイトを見てみると
せっかくの背景画像が横幅の3割くらいしか表示されておらず
さらにはスクロールすると少しカクカクとしてしまっている状態。
「レスポンシブ対応だよ！」と記述してあったものの
よくよくデモページを確認してみると、デモ版も背景画像は変わってない様子。
−CSSで対処できるのか。
現時点で使っているHTMLとCSSなどを読んでみると
mobile用のNavibarもあるので、mobileで見てるよって事や
表示しているdisplayの幅は認識しているはず。(まぁレスポンシブですし)
なので、ここでwidthの幅100%に背景画像を表示してね！という命令を入れてみる。
ダウンロードしたテンプレートはcssのファイルが3つあり
parallaxと当該imgが関連しそうなClassの箇所を全部width 100%にしてみた。
段階を追って確認したところ、修正するだけでは反映されなかったので
style.cssのparallaxの箇所にwidth:100%を追加した。
結果、なんとかiPhoneから見てもしっかりと背景画像が表示されるようになった！
よかった！
けれども
その箇所に被っていたテキストが何故か左揃えに…謎だ…。
こちらもcssで変更していたので、もう一度styleの箇所を確認、更新。
結果はPCの方は表示は戻ったけれど、iPhoneでは戻らず。
んーーーーーー。なんでだろう。
一個問題をクリアした！と思うと
またぞくぞくと問題が出てくる…(´Д｀)ﾊｧ…
ひとまず、昨日の問題は解消できたので、良しとしましょう。
ではまた次回へつづく
