CSS アコーディオンメニューが消えた?

2018/2 構想もデザインも迷走されているクラさんの案件を作成中・・・
レスポンシブをiPhoneで確認してみると、
CSS アコーディオンメニューが消えた! 何処に消えた?
PC各ブラウザでもAndroidでも表示されているのにiPhoneだけ
iPhoneのヘッダー右上にあるはずのメニューボタンが無い。

CSS アコーディオンメニューが消えた
float:right;で右配置でしたが、
position:absolute;でも出てこない・・・
あれ、右ページにフリックできる?
フリックすると、右上にポツンとあったw

さて、原因の追求と解決案を模索しなければ、次に進めません。
クラさんからの変更変更で、
ヘッダー周りのCSSとjQueryが複雑になりすぎて、手が付けられませんw
これかな? bodyのposition: relative; & position:fixed; for iPhone iOS
div.innerを噛ませたけど何も変わらず・・・原因もわからずw

横画面だとOK 縦画面だとNG
という事は、@mediaクエリ (max-width: 480px)のハズだが誤記は無い・・・
試作ページなので、1ページ内に全コンテンツを突っ込んでいたので、縦スクロールも半端ないが、途方に暮れて何気に下スクロールをしていたら、そこに有る筈のform一式が無い・・・
あれ!? 横フリックが出来るけど、何故?

原因判明!
長いURL表記が折り返さず wrap!

枠を突き抜け、bodyが150%ぐらいになっていた・・・

「携帯キャリアのドメイン受信指定サイトへ誘導で記したURLで、
Copyright文は改行するから、半角スペースは問題無いとして、
URLだと単語と判斷されるので改行でしないんですよね。

レスポンシブの注意点

  • 長いURL表記に気をつけよう
  • 大画像のwidthもNG
  • white-space: nowrap;
  • float:right;
  • bodyからのposition:absolute; right:×;

レスポンシブの改善策

  • word-wrap : break-word;
    overflow-wrap : break-word;
  • overflow:hidden;

スマホチェックが必須項目になりましたね。




コメント

コメントを書く
お名前:

メール:

Web URL:

コメント: [必須入力]

認証コード: [入力必須] ※ 画像の文字を半角で入力してください。
認証 : 一二三

 ※ 承認されたコメントのみ表示されます。