Q&A
スマホ版を確認した動作環境は何でしょうか? (端末の機種、ブラウザ、等)
pcサイト版のお問い合わせフォームhtmlをレスポンシブ対応させようとして、viewport,mediaクエリを入れて実行してみましたが、スマホ版が一切変わりません。どこがおかしいのでしょうか？教えてください。
index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>お問い合わせ</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>お問い合わせ</h1> <p>ご意見・ご要望、各種お問い合わせは、以下のフォームよりご連絡ください。</p> <form action="form.php", method="post"> <table> <tr> <th>Name</th><td><input type="text" name="name"></input></td> </tr> <tr> <th>Title</th><td><input type="text" name="title"></input></td> </tr> <tr> <th>Mail address</th><td><input type="text" name="mailaddress"></input></td> </tr> <tr> <th>内容</th><td><textarea name="article"></textarea></input></td> </tr> </table> <input type="submit" value="送信"></input> </form> </body> </html>
style.css @media only screen and (min-width:480px) { body > h1 { text-align: center; } body > p { text-align: center; } form { width: 80%; margin: auto; } form input { width: 98.4%; } form textarea { width: 99.1%; height: 200px; } table { width: 100%; } table tr { width: 100%; } body table th { text-align: left; width: 30%; padding-left: 5%; padding-right: 5%; } body table td { width: 60%; } } @media only screen and (max-width:479px) { body > h1 { text-align: center; } body > p { text-align: center; background-color: blue; } form { width: 80%; margin: auto; } form input { width: 98.4%; } form textarea { width: 99.1%; height: 200px; } table { width: 100%; } table tr { width: 100%; } body table th { color: blue; text-align: left; width: 100%; padding-left: 5%; padding-right: 5%; } body table td { width: 60%; } }
iphone6,safariで確認しました。pc版でカーソルでサイドの幅を変えるとしっかりと対応するのですが、スマホで確認した際がなぜか変化しないんです、、
ありがとうございます。こちら(iPhone 7, Safari)で確かめてみると、縦長表示だと意図通りに表示されますね(青色表示など)。一方、横に回転させて横長表示にすると、PC版の表示に切り替わってしまいます。
わざわざありがとうございます。ちなみにiphone7もあるのでそちらでも確認しましたが、結果は同じでした。ファイルをあげているサーバーの問題なのでしょうか？othersightさんが確認された際はご自身のサーバーにあげて確認されましたか？
はい、自前のテスト用サーバで試しています。HTMLとCSSの内容も上記のコピペです。
やはりサーバーの問題かもしれませんね。ですが、コード自体は間違ってないことが分かっただけでもよかったです。ありがとうございました。
ちなみに、normalize.cssというファイルもスタイルシートとして指定されていますが、そちらの影響はないのでしょうか? (CSSの優先度の問題がないかどうか、と思ったのですが)
修正してnormalize.css部分を削除して確認しましたが、フォームの枠線部分が細くなっただけでした。これはpcで確認した際もスマホで確認した際も変わりましたが、htmlのコードを修正したので、cssが効いているか、いないかといった問題の解決には至りませんでした。
こちらこそありがとうございました。
こちらであげているindex.htmlコードのviewport部分は問題ないのですが、サーバーにあげた方で,が間に入っていたようでそれを削除しあげ直したらうまくいきました。サーバーの問題等ではございませんでした。自分の見落としてご迷惑をおかけしました。コメントいただきありがとうございました。
解決したようで何よりです。ご自身で回答を投稿しベストアンサーにすることで質問を閉じていただければと思います。（回答受付中になってます）
回答3件
0
CSS
1@media onlu screen and (max-width:479px) {
onlu？ 誤記ですかね？
投稿2017/08/17 04:11
総合スコア13749
はい、その通り誤記でした。修正しても結果は変わらずでした。
何をもって変わらずと言っていますか？ CSSにほとんど差がないのでpの背景色(青)くらいしか確認できないかと思いますが
他にもwidthをスマホ版のみ100%他は（pcは）50%、body table th にdisplay:block;を入れてみたりしましたが、変化しませんでした。
セミコロンを抜く癖があるようですので、気を付けてみたらどうでしょうか？
そうですね、、結果は修正後変わらずでした。
0
こちらの環境でテストしてみたところ正常に動作しているようでした。
ブラウザのキャッシュが残っている場合がありますのでキャッシュを削除するか、もしくはGoogleChromeのシークレットモードなどで確認してみてください。
ちなみに、index.htmlの13行目に余分なカンマが紛れてますので取り除いてください。
html
1 <form action="form.php" method="post">
さらに、inputの終了タグは必要ありませんのでそれも削除してください。
投稿2017/08/17 07:26
編集2017/08/17 07:30
退会済みユーザー
総合スコア0
0
自己解決
サーバーにあげているindex.htmlファイルのviewportの記載部分が少し間違えていることで不具合の原因になっていました。様々なアドバイス等ありがとうございました。
投稿2017/08/24 07:51
総合スコア97
あなたの回答
tips
プレビュー
