Q&A
HTMLソースコードも記載してください。
また、①、②もセレクタを省略せず記載しましょう。
PC（mac,win共に）や、fireHDなどのタブレットでは、意図した通りにwebサイトが表示されるのですが、iPadやiPhoneのみ、レイアウトが崩れてしまいます。
色々と調べて試した結果、
<meta name="viewport" content="width=640, user-scalable=yes,">
をhead内に記述することで、概ね改善されたのですが、
① background-imageの画像が縦長に表示されてしまう。
html
1<div class="top-box"> 2 <div class="top-p"> 3 <h1>,,,,,,</h1> 4 </div> 5 </div>
css
1 .top-box{ 2 width: 100vw; 3 height: 100vh; 4 min-height: 100vh; 5 background-image: url(../img/DSC_6871.jpg); 6 background-size: cover; 7 background-position: center; 8 position: relative; 9 font-weight: normal; 10} 11.top-p{ 12 height:100px; 13 width: 90%; 14 margin: auto; 15 position: absolute; 16 top: 0; 17 left: 0; 18 right: 0; 19 bottom: 0; 20 color:white; 21 text-shadow: 2px 2px 1px black; 22 text-align: center; 23}
② background-imageの画像が大きく表示されてしまう
html
1<div class="top-box2"> 2 <div class="space"> 3 4 </div> 5 6 <div id="container"> 7 <div class="container-box"> 8 <h1>,,,</h1> 9 <p>,,,</p> 10 </div> 11 </div> 12 </div> 13
css
1 .top-box2{ 2 position: relative; 3 background-image: url(../img/DSC_2690.jpg); 4 height: 100%; 5 background-attachment: fixed; 6 background-position: center; 7 background-size: cover; 8 background-repeat: no-repeat; 9 } 10
③ ハンバーガーメニューのcolorが反映されない
html
1<header> 2 <h3><a href="index.html">,,,,,</a></h3> 3 <div id="nav_toggle"> 4 <div> 5 <span></span> 6 <span></span> 7 <span></span> 8 </div> 9 </div> 10 <nav> 11 <ul> 12 <li><a href="index2.html">,,</a></li> 13 <li><a href="index3.html">,,,</a></li> 14 <li><a href="index4.html">,,,</a></li> 15 <li><a href="index5.html">,,,</a></li> 16 <li><a href="mailto:">,,,,</a></li> 17 </ul> 18 </nav> 19 </header>
CSS
1header nav ul li a{ 2 display: block; 3 color: black; 4 }
などの不具合が改善されません。ちなみにPCでは全て意図した通りに反映されており、iPhoneなどにのみ不具合が出ております。
こちらの改善方法をご教示お願い致します。
回答2件
0
個人的に幅指定をpxでするのが嫌いなのもありますが、そもそもwidth等をpxで指定することはあまり望ましくありません。vwや%を使ったほうが確実です。
パソコンではwidthが500pxでもいいかもしれませんがスマホやタブレットで見ると表示が崩れる原因になります。
まぁ、viewportはmiyabi_takatsukさんがおっしゃっているような指定方法が普通かと。
投稿2019/05/27 04:06
退会済みユーザー
総合スコア0
0
ベストアンサー
①、②に関しては、metaのviewportの設定の仕方に原因があるかと思います。
html
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
に置き換えれば、背景画像も、問題なく表示されることが確認できました。
html
1<meta name="viewport" content="width=640, user-scalable=yes,">
では、おそらく、ディスプレイの横幅の実サイズが、640pxのデバイスでないと正確な表示は叶わないかと思います。
（iPhone 7は750pxだったりと、今はまちまちのサイズなため）
③については、私の環境で試したところ、
問題なく黒くなりました。
となると、おそらくですが、他に読み込んでいるCSSないし、HTML上に記載している、他のCSSが干渉している可能性があります。
よって、③を解決するためには、他の部分も含めたHTML、CSSの記載が必要になります。
もしくは、h3でくくっているa要素のcolorなのであれば、h3要素のa要素にはCSSが当たっていないので、
当然colorは効きません。
投稿2019/05/26 08:41
総合スコア9528
ご丁寧な回答、本当にありがとうございます。
上記のviewportを指定したところ、画像は適切に表示されました。
しかし、全体のレイアウトがやはり崩れてしまい、どちらかと言うと、下のviewport設定の方が全体のレイアウトは綺麗に表示されています。
ちなみにbackground-imageでなく、imgタグでは適切に表示されております。
③については、Macではレスポンシブの画面幅で問題なく黒くなっています。iphoneでのみ、青く表示されてしまっています。
iphoneで検証などできれば良いのですが、、、。
わかりました！
yoshi0819さんのおっしゃる通り、単位を変えて調整されると、①、②は解消されていくかと思います。
その相対系単位、vwなどや、%を使うことによって、上のviewportが生きていきます。
③に関しては、私は、実機ではなく、Xcode付属のエミュレーターを使用して検証いたしました。
ブラウザのデベロッパーツールと違い、実機とほぼほぼ同じ動作が確認できます。
実機で検証が難しく、Macをお使いならば、そちらで検証してみてはいかがでしょうか？
また、
> iphoneで検証できれば良いのですが、、、。
ということは、質問者さんが直接実機でみたわけではないのでしょうか？
キャプチャ画像とかいただけませんか？
また、本質問でいただいているコードでは、青くはならないので、本質問に記載以外の部分の、HTML、CSSも影響している可能性がでてくると思うので、質問本文に含めてください。
本当にありがとうございます。
①、②につきましては、すごくありがたいヒントをいただけたので、もう少し調べて試していこうとおもいます。
③につきましては、ご指摘の通り、他のCSSの記述間違いがわかりました、、、ご迷惑をおかけして申し訳ありません。とても助かりました。解決できて嬉しいです。ありがとうございます。
解決できて何よりです！
頑張ってください〜！
あなたの回答
tips
プレビュー
