前提・実現したいこと
Webデザイン経験3か月です。
Responsive表示と各ブラウザ表示では表示の仕方に違いがあるのか知りたいです。
chromeのディベロッパーツールで、Responsive1024pxとi pad pro1024pxの見え方が変わってしまいます。
Responcive(1024px)をクリックするとbackground-imageも画面幅に合わせて縮小してくれるのですが、
項目をi padpro(1024px)で表示させると拡大してしまします。
該当のソースコード
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no"> <title>Wedding flower Lab.</title> <link href="css/fakeLoader.css" rel="stylesheet" type="text/css"> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet"> <link href="css/slick.css" rel="stylesheet" type="text/css"> <link href="css/slick-theme.css" rel="stylesheet" type="text/css"> <link href="css/style-prefixed-media.css" rel="stylesheet" type="text/css"> <link href="css/style-prefixed.css" rel="stylesheet" type="text/css"> </head> <header class="containerA inviewfadeInUp"> <div class="hero"></div> </header> .containerA{ display: -ms-grid; display: grid; -ms-grid-columns: 1fr 70% 30% 1fr; grid-template-columns: 1fr 70% 30% 1fr; -ms-grid-rows: 40px 200px 30px 60px 40px 100px 30px auto; grid-template-rows: 40px 200px 30px 60px 40px 100px 30px auto; text-align: center; } .hero{ -ms-grid-column: 1; grid-column-start: 1; grid-column-end: -1; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: -1; background-image: url(../img/beautiful-black-and-white-min2.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; height: 100vh; }
試したこと
検索してみたのですがなかなかつかめず、、
初歩的な質問恐れ入りますが回答の程どうぞお願い致します。
補足情報(FW/ツールのバージョンなど)
Dreamweaver,chrome
実機確認はされているのでしょうか。
ありがとうございます。上記の内容はローカルでも、サーバーにアップロードしたものでも同じことが起こります。
実機=実際のiPad という意味です。開発ツールのデバイス確認はあくまで簡易の仮想イメージなので100%同じ結果となるとは限りません、必ず実機確認が必要です。実機でも同じ現象であれば別途検討が必要です。
なるほどです。iPadは手元になく、実機での検証は出来ていませんでした。開発ツールのデバイス確認はあくまで簡易なのですね。実はまだ、ポートフォリオを個人的につくっている段階でさまざまな実機で検証する環境が用意出来てませんでした。手元の携帯からだけでも確認したいと思います。返答ありがとうございます。
実はローカルにて、Responsive375pxとiPhoneXの表示もずれていまして、今手元の携帯から開いたところやはり同様のズレが生じてしまいました、、
こちらの質問を確認する前に回答してしまっておりました。これは参考コードのCSS・HTMLについての回答を望んでいらっしゃるのでしょうか?でしたら回答がずれていて申し訳ございませんでした。
回答2件
あなたの回答
tips
プレビュー