前提・実現したいこと
質問を見ていただきありがとうございます。2週間くらい悩んでいる内容ですので解決できると嬉しいです。
また初めて投稿するので不備が多くあると思いますが、足りない情報は言っていただけるとありがたいです。
すぐに追加します。
[内容]
githubにあげているポートフォリオがpcでgooglechromeの検証を見るとレスポンシブできている画像が、スマートフォン(iPhoneのSafari)でgithubを通じて見るとすごく拡大されるに加えて画質が大荒れ。
[pcの場合]
html
1**HTML ** 2 <div class="skill"> 3 <h1 class="sec03">Skill</h1> 4 </div>
css
1**CSS ** 2.skill { 3 position: relative; 4 background: url(book.png) no-repeat center center fixed; 5 -webkit-background-size: cover; 6 -moz-background-size: cover; 7 background-size: cover; 8 color: #fff; 9 padding-top: 110px; 10 min-height: 900px; 11 letter-spacing: 2px; 12} 13 14.sec03{ 15 text-align: center; 16 font-size: 30px; 17 line-height: 1.8; 18 text-transform: uppercase; 19 font-family: "Montserrat", sans-serif; 20 margin: 0; 21}
試したこと
background-imageではなくimgを使い行なったところ綺麗な画像で表示できたが、写真が小さくなりすぎたため、できればpc画面に表示されているような綺麗なレスポンシブにしたい。
chrome以外にpcのsafariで確認したが、正常に画像が反映した。そのためスマホ(iPhoneのSafari)の何かしらの影響が原因と考えられた。
javascriptのアニメーションが重いため動かないかと考えて、ファイルを消しましたが効果がなかったです。
<meta name="viewport" content="width=device-width,initial-scale=1.0"> を一度消して見ると画像は綺麗に反映したが、消してしまうとそもそもレスポンシブが対応にならない補足情報(FW/ツールのバージョンなど)
拙い文章ですが、回答していただけると幸いです。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー