Android 固定ナビメニュー ページ内リンク スムーススクロール

レスポンシブサイトを作る事が100%に近くなっている現在、
デザインで一番最初に考えるのはナビメニューです。

レスポンシブデザインは基本的にPCにてサイト幅の変化をさせながら制作し、
手持ちのAndroid、iphone、その他ブラウザで確認の流れが多いですね。

今回の案件は通販用のランディングページでした。
固定ナビメニューにページ内リンク&スムーススクロールを作って動きのあるサイトを作りました。

これがAndroidで動かず制作ドツボに陥りました。

「固定ナビメニュー ページ内リンク スムーススクロール」
実装したい事が複数なので、不具合の原因の特定が分からないのです。備忘録です。

 
 

問題提起

 

自分がどの問題に位置するのかが問題解決への道。整理してみます。

PCブラウザ全てとIphoneでは正常に動くのにAndroidで動かない。

具体的な症例

position:fixedの固定メニュー部分
ドロップダウンメニュー、ナビメニューのページ内リンクに不具合。
・2回タップしないといけない。
・もしくは全く機能しない。
・ドロップダウンが効かない。

しかし、コンテンツ部分では(固定ナビでなく他の部分で動くのか試してみた)
・1回のタップで大丈夫。
・正常に機能する
・ドロップダウンも効く。

つまり、
 
「 position:fixedのメニューのみの問題 」
 
であった。
 
さらに、細かく試行錯誤していると
 
「 スクロールせず、ページの一番上トップの位置のみリンクが効く 」
 
ことが分かった。
(ちょっと説明しにくいですが、Position:fixedで囲んだブロックの場所だけドロップダウンのリンクが効く。場所を外れたたらリンクが効かない。)
だから、
 
「 スクロールの位置によってはページ内リンクが効かない。もし効いても2回タップしなければいけない。 」
 
という、自分でも意味が分からない言葉で表現しなければならないくらい迷走する事となった。
 
ちなみに結論で分かった事で
 
「 Androidでバージョンが関係があった。 」
 
という事が分かりました。
 
 

今回の解決&結論

Android 2.3でposition:fixedを有効にするにはviewportで、content=”user-scalable=no” が必要

例 <meta name=”viewport” content=”width=device-width,user-scalable=no”>

これでまさか全部の問題が解決しました。

“user-scalable=no”はスマートフォンなどで
「ページをデバイスの幅で表示させてそこから拡大・縮小はできない」という設定です。
 
Android 2.3より後継モデルはこの設定をしなくても正常に動くようです。

拡大できないのはデメリットですが、そちらを優先するかどうかデザインの案件により変わるのでしょう。

デザインの作り直しとjavascriptの外注まで考えていましたので、非常に嬉しい解決でした。

Android ページ内リンク 
Android アンカーリンク 1回
Android メニュー固定 バグ
Android スムーススクロール 

などで検索されて迷われている方の参考になれば幸いです。
(稚拙な文章力ですみません)
 
 

今回の自分の案件では関係なかったが寄り道した事。

寄り道1:メニューが悪いのならとメニューの記述を変えた。
寄り道2:スマホの固定ナビゲーションにはjquerymobileを導入。
http://jquerymobile.com/download-builder/
Toolbar系の部分をチェックしてダウンロードアップロードする形だ。
寄り道3:hoverが悪影響を与える場合がある。スマートフォン幅ではactiveにしてみる対応。
寄り道4:position:fixedの固定メニューではNAVに高さを指定しているかの確認。高さは必要です。
寄り道5:overflow:hidden;を固定メニュー部分とコンテンツ両方に設定してみた。
寄り道6:上と同じくz-indexの値を一致させてみた。
寄り道7:iOSでリンクを2回タップしないと画面遷移しない問題ではCSSで「opacity」が設定されていた。

 
 
 

記事のタイトルとURL をコピーする!

PAGE TOP

Copyright(c) 2012- HAGライフ All Rights Reserved.