Bootstrap4を使ってWordPress化したらレスポンシブが効かなくなった件

この記事では、Web制作でBootstrap4を使ってローカル環境で作り上げてからテスト環境へアップしたらいきなりレスポンシブが効かなくなったという内容になっています。

2020年2月15日現在、原因はわかったのですが、解決策がさっぱり分からないので忘備録として記事にしておきます。

 

今回、制作にあたってBootstrapはLP制作でしたか使ったことはありませんでした。

HP全体をBootstrapでという内容で1つ作り上げようとしましたが急ブレーキがかかりかつ4日ほど悩んでいる状況です。

 

Bootstrap4を使ってWordPress化したらレスポンシブが効かなくなった

 

Bootstrapの基本操作とかについては、ググってください、この記事では解説しません。

terataill風に書くと以下の通りです。

 

実現したいこと

Bootstrapで書いた内容がPC、タブレット、スマホでレスポンシブになって欲しい。

 

エラーメッセージ

ローカル環境のWordPressでは全てレスポンシブ化される。

なぜかスマホの縦画面だけレスポンシブにならずに、containerのwidthが980pxで固定される。

 

試したこと

viewの確認、Safariまでカバー済み。

containerとrowとcolの崩れがないか確認。

divの数があっているか確認。

 

以下の画像のようになります。

こちらがテスト環境でのスマホ表示にしたときのディベロッパーツールの表示。

styleの部分を見ていただけるとわかる通り、grid.scss:6と書いていある方のwidthが、「width:100%」となっており、上のcssのwidth:900px;が効いている。

つまり、スマホの横幅にしているのにPCのときと同じ大きさになっています。

横スクロールができます。

 

続いてローカル環境で全く同じコードを入れたときが以下の画像。

 


.containerのところにwidth:980px;がありませんよね。

なぜかローカル環境のWordPressではレスポンシブになります。

まさかとは思いましたが、phpではなくhtmlで打ち込んでいるときももしかしてレスポンシブになってなかった?と思いおそるおそる確認してみると‥

 

なぁぁぁああああああxsぁあzdsgじょあs!!!!

まさかのHTMLでもスマホだけレスポンシブになっとらんやん‥

えぇなんで‥

 

ビューポートも書き換えてみたりとかしましたが上手くいかなかったので、もう一度やり直してみます‥

また解決したらここに追記します。

 

ブートストラップでSPのみ表示されなくなった原因

解決して一週間ぐらい考えていましたが、あまり根本的解決になっていないです。

 

問題はナビゲーションにありました。

bootstrapだとテンプレのナビゲーションがあって、CSSでカスタマイズしていくのがいいですが、何を血迷っていたか自作のナビゲーションをガン入れしていました。

 

メディアクエリを設定していないから、そりゃSP表示はPC表示になりますよ笑

Bootstrapの一部が効いて、ナビゲーションだけspサイズになるという現象でした。

 

根本的解決にはなっていないかもしれませんが、レスポンシブでおかしいってなったら一度書き直した方が早いです。

自分の場合、Bootstrapでは使わない書き方というか、メディアクエリを設定しないでやっていたので、勝手にcontainerが980pxで固定されていました。

 

普段、Bootstrapを使わずにの案件だったので間違いはあるなぁと実感したところです。

 

なぜローカル環境ではレスポンシブになっていたのか?

 

ここが解明されていないので根本的ではないと言っているのですが‥

なぜローカル環境ではレスポンシブになっていたか謎です。

 

と思いきや、よくよく確認してみると、微妙に横スクロールできるようになっていました。

この段階でレスポンシブは上手くいっていないので気づくべきでした‥

 

 

Bootstrapでスマホだけレスポンシブにならないときの対処法

 

まとめると、

解決法が分からなかったら、Bootstrapのテンプレをカスタマイズしよう

ということです。

 

はーよかった見つかって。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です