【NoCode #27】 nicepageのバグなのかしら・・・・いやっ？？？
さて、前回からだいぶ間があいてしまいましたが、そろそろ再開したいと思います。
久しぶりなので今回っはちょっと短めに。
実はフォームを作っている時に発見してしまったバグ。
本業もありつついろいろ調査してテストしてとどこに問題があるのか最初はさっぱりなバグ対応でしたが、なんとかフィックスしたので記事再開です。
というより終わってみればこんなことか・・・という内容ですw
完成したと思っていたけど・・・
■バグ、見つかりました
作り込んでいく最初の方は大丈夫だったような気がするのだけど、全部できてこれでいいかなと思っていたら、あれ・・・スマホで右に余白が（正確にはiPhone14pro）。
そして横スクロールができるようになっている・・・。
というバグを発見。
どこからこんなことになっていたのかよく覚えておらず、何が原因かもどうもはっきりしない。
そういえばなんか全体的に右に寄ってるなぁ、と思ったらバグでした。
なにをやってもうまく行かず、だいぶ時間がかかってしまった。
まぁフィックスしてみればたったこれだけのことか・・・というレベルの修正内容なのだけど、いろいろと検証しつつまとめてみようと思います。
■レスポンシブの表示に問題あり
バグの内容は先にも書いたとおり、iPhoneでの表示異常。
ただ14だけなんだよね・・・
というわけでまずはどんな表示になってしまうのか、画像で見てみようと思います。
と、こんな感じで右によってしまっています。
右側にスクロールすると残りの部分が表示されます。
というわけで、iPhoneは手元にある他の機種、Androidは普段使わないので最新機種はなく、昔アプリのテスト用に自分で用意したふるーい古いAndroidスマホ1台でテスト実行。
こんな感じでずらっと並べてみましたw
左上がAndroid、あとはiPhoneなんだけど、Androidの隣の黒いのはiPhone3。
こいつだけ電源ケーブルが見つからず充電できなかったので画面が黒いままですw
というわけでまずはiPhone5から
問題ないですね。
左右の余白がかなり詰まってしまっていますが、横スクロールも発生しないしレイアウトに関しても特に問題なし。
次はiPhone7。
左右の余白がちょっと広いような気がしまうが、表示自体には問題ありません。
さらにiPhoneXs。
これもとくに問題はないと・・・
結局iPhone14proのみ横スクロールが発生していまうという結果になりました。
Andoroidはキャプチャし忘れてありませんが、こちらも特に問題はありません。
ただ機種が古いので、最新機種ではどうなるかわかりませんが・・・
■いろいろと調べてみましたよ
そうです、調べてみましたよ。
元々HTMLやらCSSやらそれほど理解が深いわけではないので、こういうとき大変ですw
調べていくとこの現象はそれほどレアケースではなく稀におこることではあるらしい。
いくつか対応策があるようなので一つづつ試してみたいと思います。
■まずはCSSにコードを追加してみます
まずは、メインのCSS内にあるbodyクラスに対して以下のコードを追加してみました。
min-width: 320px;
overflow: hidden;
width: 100%;上記のコードを入れてみたのですが、何も変わらず・・・
実は本当はここにヒントというか、解決策の一旦が隠れていたのですが、このときはスルーしてしまいました。
■次はHTMLのコードをちょっいじります
HTMLのほうですが、
<meta name="viewport" content="width=device-width, initial-scale=1.0">これを、
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1, user-scalable=no">こんな感じに、最大サイズとユーザーによるスケール変更を”no"とするコードを追加してみましたが、なにも変わらず。
という感じで調べた中で効果のありそうなこの2つを実行してみましたが、どちらの対応策も効果なし。
横スクロールはなおりません。
■nicepage上でレイアウトの調整をしてみる。
nicepageでレイアウトを作成する画面
こんな感じになってますね。
コンテンツ幅は表示されたデバイスのブラウザに合わせて、余白などの設定どおり表示させる範囲で、レイアウト幅はここまでレイアウトに使えますよという範囲です。
コンテンツ幅内におさめてレイアウトすると、ブレイクポイントを設定した中でこのレイアウトを表示します。
レイアウト幅いっぱいに使うと、開いたブラウザのウィンドウ幅いっぱいまで画像などを表示する、という形になります。
まぁだいぶ説明端折ってますが。
おおよそそういう意味合いです。
で、最初にやってみたのは、右側がブラウザからはみ出すということは、右側
を少し中央に寄せてみることに。
結果はまぁ当たり前ですが、コンテンツ部分がただ左寄りになるだけで、スクロール自体は解消されず。
まぁ他にもいろいろとやってみたのですが、どれもうまく行かず。
とりあえずいろいろやってみて結果どうなるか、というところから問題点を探っていたのですが、なかなかどうもはっきりしない状態。
ということで、最初に戻って
min-width: 320px;
overflow: hidden;
width: 100%;こいつをもう一回一つづつ検証してみようと思って・・・
ん？
min-width: 320px;ん？
ここで初めて気がついた。
nicepageで最初にサイトを作成すると、基本はレスポンシブで作成されるのですが、いままで特に気にすることもなくそのまま作成を始めていて、ブレークポイントの設定も確認したことなかったのですが、ここではたと気がついて確認してみました。
ブレークポイントの設定。
・・・・・
340・・・
■そしてフィックス
最初にいろいろ調べていくなかで、どうもiPhone14では320がブレークポイント設定ということらしいということだったので、ここの設定値を320にとりあえず変更して確認してみたら、問題解決・・・。
First Viewだけですが、この下の部分や他のページも大丈夫そうなので、340→320に変更したので若干レイアウトが崩れたりしていたところを修正して確認。
とくに問題なくきれいに表示され、横スクロールも解消されていました。
nicepageさんごめんなさい・・・
バグではなかったです。
ということで、nicepageで新規にレスポンシブのサイトを作成する場合は、スマホのポートレイトViewの設定をまず320に変更する、というのを忘れずに行うことをルールにする、という結果になりました。
iPhone7やiPhone10で左右の余白が大きくなるのは若干気になりますが、そこの部分についてはまた次の課題として解決策を考えてみることにします。
というわけで今回はこれでおしまいです。
次回のテーマはまだ決めていませんが、Wordpress向けのテンプレート作成も始めているので、これに関係した部分のお話にしてみようかと・・・
思ったところ前回の最後に、フォーム作成の話を次回します、と書いてあるので、こっちにするか、少し考えてみます。
それではまた次回。
〜本日の「余談ですが」〜
余談ですが、先日またまた熱海に行ってきました。
とはいえおよそ2年ぶり。
前回は行動制限の合間に行ったので結構人も少なかったけど、今回は平日ではあるものの夏休み、そして行ってお寿司食べてるときにポスターみて気づいたのだけど、ちょうど花火の日だった。
お陰で結構な人出と渋滞。
行きは3時間、帰りは4時間もかかった。
まぁ帰りはちょっと寄り道もしたんだけどね。
天気もよかったし、お寿司も美味しかったし、満足な1日だった。
この記事が気に入ったらサポートをしてみませんか？