徳田けんいち後援会

科学・医療
科学・医療
科学・医療

デバイスサイズをスマートフォン用に変更すると、メニューの表示が乱れる現象について


 MySQLを利用した今回の動的な商店街サイトの構築の実証で、GoogleMapの埋込コードをなかなかうまくMySQLに記録できなかったことに加え、もう一つ悩みがありしました。

 それは、商店街サイトの実証サイトはこのサイトと同様のスタイルシートを使用し、レスポンシブWEBデザインに対応していましたが、PCからスマートフォンにデバイスサイズを変更したとき、スマートフォン用に変化したメニューの表示が大きく乱れ、その原因がまったくわからなかったことです。

 GoogleMapの埋込コードを利用できない場合もそうですが、スマートフォンに対応できなければ商品としては使えないことになり、最悪の場合、これまでの努力が水の泡になってしまいます。

 今日、原因がこのあたりにあるのではないだろうかというおおまかな目星をつけ、ページの一番上にあるSESSION関係のファイルを削除してみたところ、メニューの乱れの原因がSESSION関連のコードにあることがわかりました。

 ただ、セキュリティーの問題がありますので、SESSION関連のコード全体を削除することはできず、不具合を惹き起こしている部分だけを削除することにしました。

 結果として、ログインコードやログイン者の名前を表示する機能が不具合を生じさせていたことがわかり、その部分だけ削除し、失った機能はSESSION領域で取得した変数をうまく操作し、HTML領域で実行できるように変更しました。

 これで、GoogleMapの埋込コードの記録と表示の問題ともう一つ、ここ数日の大きな悩みを解消することができました。

 

 ログインしている場合
 スタッフコード、スタッフ名が表示され、このページ本来の機能が実行されます。

 

 ログインしていない場合
 ログインしていませんと表示され、このページの本来の機能は実行されません。

 

ページトップへ

Translate »