1. TOP
  2. web
  3. javascript
  4. 実機チェックで悶絶する

実機チェックで悶絶する

|

ポートフォリオの完成が遅れている。iPhoneやiPadの実機でチェックし始めると、PCのchromeでは発見できなかった問題が次々に出現したためだ。

固定したはずのナビゲーションバーが隠れる

iPhone7でポートフォリオを開いたら、スムーズスクロールでジャンプ先にピタッと止まってくれず、position:fixed; で固定したはずのナビゲーションバーが、ブラウザのメニューバーの下に隠れてしまう。ナビゲーションを引っ張り出すために軽くスクロールせねばならない。

固定されるべきナビゲーションを、一手間かけて引っ張り出すというのは、ものすごくフラストレーションがたまる。

iOS固有の問題であるらしいことはわかったが、悩ましいのは、問題なく上手くいくこともある(むしろ、その方が多い)ことだ。iPhone7のchromeでは、サイト更新後などは、特にスムーズスクロールの動きが不安定で、常に表示されるべきナビゲーションバーが、メニューバーの下に隠れることが多いが、そのうち安定してくるような感じがある。
iOSのchromeに特有の問題なのかどうか、よくわからない。

スマホでhoverを効かせるには

部分的にVue.jsを導入して現在作成中のGeronimo Labelのサイトの言語選択のdropdown menu は、PCではhoverが効いて背景色が変わるが、スマホでは何も起こらず、タイミングがわからないままタップで何となく操作する感じになる。これがどうにも気持ち悪いので何とかならないかと調べた。

上記情報あたりが、おそらく解決策だと思われる。clickイベントでなくtouchstartを使うなど、スマホへの対応についても、早いとこ勉強する必要があるようです。