2018/2 構想もデザインも迷走されているクラさんの案件を作成中・・・
レスポンシブをiPhoneで確認してみると、
CSS アコーディオンメニューが消えた！ 何処に消えた？
PC各ブラウザでもAndroidでも表示されているのにiPhoneだけ
iPhoneのヘッダー右上にあるはずのメニューボタンが無い。
float:right;で右配置でしたが、
position:absolute;でも出てこない・・・
あれ、右ページにフリックできる？
フリックすると、右上にポツンとあったｗ
さて、原因の追求と解決案を模索しなければ、次に進めません。
クラさんからの変更変更で、
ヘッダー周りのCSSとjQueryが複雑になりすぎて、手が付けられませんｗ
これかな？ bodyのposition: relative; ＆ position:fixed; for iPhone iOS
div.innerを噛ませたけど何も変わらず・・・原因もわからずｗ
横画面だとOK 縦画面だとNG
という事は、@mediaクエリ (max-width: 480px)のハズだが誤記は無い・・・
試作ページなので、１ページ内に全コンテンツを突っ込んでいたので、縦スクロールも半端ないが、途方に暮れて何気に下スクロールをしていたら、そこに有る筈の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;
スマホチェックが必須項目になりましたね。
コメント