現在、サイト構築をしているのですがある程度までデザインを固めてモバイルレスポンシブルのことを思い出して以下のサイトで確認したところかなりばらつきがありました。
大型のスマホやデバイスでは大丈夫っぽいんですが、小型のスマホ(iphone5?)だとちょっとはダメでした。
そこでお聞きしたいのですが皆さんはモバイル対応する際はどうしてるのでしょうか。
現在問題の箇所は固定(position:fixed)にしているところのずれとヘッダーのメニュー(floatしているところ)が小さいブラウザだと重なってしまいます。
【main.php】 <div class="head"> <a href="main.php">トップ</a> <div class="head-left"> <!--検索窓--> <table> <tr> <form action="xxxx" method="get"> <td> <input calss="search" type="text" name="aeeeeee"></td> <td><input type="submit" value="検索する" ></td> </tr> </table> </form> </div> <!--ヘッダー右--> <div class="head-right"> <a href="tttttt.php">投稿画面</a> <a href="oooooo.php"> ログイン</a> <a href="dddddd.php">会員登録</a> </div> </div>
【css】 /*ヘッダー部分*/ .head { width:100%; height:50px; text-align:center; } /*ヘッダー(左)部分*/ .head-left { float:left; width:20%; } /*ヘッダー(右)部分*/ .head-right { float:right; width:20%; margin:10px; }
http://www.jamus.co.uk/demos/rwd-demonstrations/
確認したサイト(ローカル環境での確認になります。)
よろしくよろしくお願いします。
該当部分のコードが説明している現象を再現するには不足しているように見えます。(position:fixedとか無いですよね?)可能であれば制作中のコードのサーバへの公開、無理なら正確なコードと実際に起きている現象が分かるキャプチャなどを追加してください。
コメントありがとうございます。先ほどキャプチャ画像添付いたしました。position:fixwdの方も追加いたします。お待ちください。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー