iPhone等スマートフォンの縦表示時だけのはなしなんですが..
メインサイトのグローバルメニューのデザインを変更しました。
これまでは、
iPhone等の縦表示のときだけ
『jQuery Menu: jquery ipod style and flyout menus(fg.menu)』
というjQueryプラグインを少しカスタマイズして、
メインメニューとして表示されるように設定してたんです。
が、先日の記事
に加え、iPhone4S(au版)でも同様の問題が発生することを自分の目で確認しまして...
というのも、先日お越しくださったお客様がandroidのスマホを持ってられたので、上記の問題を確認しようとお願いして表示してもらったりしてたところ、もうお一人が
「私のiPhoneでもそうなりますよ!前はいけてたのに...」
とのこと...
見せてもらったら、確かにwww
softbank版だけ大丈夫なのかどうか分かりませんが、少なくとも私どもで保有するsoftbank版のiPhone3G、iPhone3GS、iPhone4、iPhone4Sの全てで問題なかったので、確認させていただいて目が点になりました。
という訳で、いよいよあのまま放っておくわけにもいかなくなりまして。
対処としては、問題の種のあの緑のメニューボタンを諦めることにしました。
結構頑張ってあのボタンを設置したんですがね~...
そもそも、あのプラグインはかなりややこしくて、私のスキルでは完全に手に余ってました。
あのボタンの色さえ好みに変更することがままならぬ次第でして...。
結局、PC表示で使ってるメニューバーのままいくことにし、スマホの縦持ちの時だけCSS切り替えでサイズと並べ替えを行う形でいってみることにしました。
隙間とか色々細かい詰めはかなり甘いと思いますが、1通りの動作は問題なくできてると思います。
もし、なんか変な動作したりしていれば、是非是非ご連絡いただければありがたいです。
ちなみに、補足というか覚え書き。
1,2週間前に、サイトの表示速度を少しでも上げるための対策をしました。
それ以前は何でもかんでもJavaScriptは外部JSファイルとして読み込むようにしていたんですが、中身の軽量なものだけ直接htmlファイル内に書き込むことで、外部ファイル参照を減らす、という対策をとった経緯がありました。
今回の改良を検討してる途中で、上記速度アップ対策の際に、同じhtml内に「$()」と「JQuery()」が混在してることに気付きまして...
もしかしたらそこらあたりが問題で、あの動作不良があったのかもしれないな~、と思いました。
が、ちょうどfg.menu用のjQueryコードだったその部分は、削除することで決めてたので検証はしなかったけど 覚書^^;
追記:
ふと思い立ってCSSのW3C-ValidationCheckをやってみたら、「おめでとうございます! エラーはありません。」って褒められた(*^_^*)
CSSの方はエラーがあったの分かってたので、しばらく確認してなかったけど、あのメニュー用一式を外しただけですんなり。
JavaScriptも2つ減って少し高速化も出来たし、外して正解!ということかな。
警告がいくつかでてるので、とりあえずそれを消す方向で進めてみる。
