デバイスごとの要素(height)の修正について

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• [ ]使用デバイスごとに表示領域が変わり、スタイルが崩れてしまうサイトプレビューの修正をしたいです。

詳細

オリジナルのwebサイトを制作中なのですがデバイスを変更すると position: sticky;でbody　 top: 0;に粘着させたheaderが直下の要素にかぶる(押し潰す？)ように表示されてしまい困っています(画像参照)
デスクトップ、ノートどちらのモニター解像度も同じフルHDなのですが、なぜかノートの方だけ崩れて表示されます。
同じ解像度でもメディアクエリを使用する必要があるのでしょうか。
自分で調べながら色々試したのですがどうしても解決出来ませんでした。
原因、修正併せてどうか御教授お願い致します。

リンク先に画像素材含めたhtml&cssファイルをアップしましたので、必要でしたらダウンロードして下さい。
ファイル名　Portfolio

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
```<header id="head">
      <div>
        <h1 class="logo">sacrificeESC</h1>
      </div>
      <nav class="header-nav">
        <ul>
          <li><a href="#">くらふと</a></li>
          <li><a href="#">ぷろふぃーる</a></li>
          <li><a href="#">こんたくと</a></li>
        </ul>
      </nav>
    </header>
   <!-- ここからトップビュー -->
    <div class="top-view first-img">
    </div><!-- video -->

    <div class="main-section">
      <div class="main-content wrapper">
        <div class="main-item">
          <h1 class="main-h1">技巧</h1>
          <img src="img/htmlicon.png" alt="TTMLicon">
          <img src="img/cssicon.png" alt="CSSicon">
          <p>テキストエリア</p>
        </div><!-- main-item -->
        <div class="main-item">
          <h1 class="main-h1">作画</h1>
          <img src="img/photoshopicon.png" alt="">
          <img src="img/figmaicon.png" alt="CSSicon">
          <p>テキストエリア</p>
        </div><!-- main-item -->
        <div class="main-item">
          <h1 class="main-h1">其之他</h1>
          <img src="img/java.png" alt="HTMLicon" width="48" height="48">
          <img src="img/wordpress.png" alt="CSSicon" width="48" height="48">
          <p>テキストエリア</p>
        </div><!-- main-item -->
      </div><!-- main-content -->
    </div><!--main-section -->

    <div class="top-view second-img">

    </div><!-- ここまで黒板 -->

    <div class="second-content">
      <h1 class="second-h1">私と言ふ人間</h1>
      <div>
        <div>
          <img src="img/htmlicon.png" alt="">
        </div>
        <p>色々お試しと自己紹介</p>
      </div>
    </div><!-- second-content -->
    <footer>
      <p>&copy; sacrificeESC All rights reserved</p>
    </footer>

  </div><!-- ここまでpage -->
</body>

</html>

```CSS
コード
```@charset "utf-8";

html {
  font-size: 100%;
}

body {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  line-height: 1.5;
  background-color: #f0f0f0;
  font-family: 'Merriweather', serif;
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'Sawarabi Mincho', serif;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

h1 {
  font-size: 42px;
}

p {
  font-size: 1.3rem;
  letter-spacing: 1px;
  font-family: 'Noto Sans JP', sans-serif;
}

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

/* ヘッダー */
#head {
  padding: 0 5%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  border-bottom: #c2c2c2 1px solid;
  position: sticky;
  top: 0;
  z-index: 999;
}

.header-nav ul {
  display: flex;
}

.header-nav ul a {
  display: inline-block;
  color: #151515;
  margin-left: 28px;
  font-family: 'Noto Sans JP', sans-serif;
  transition: 0.3s;
  position: relative;
 
}

.header-nav ul a:hover {
  transform: scale(1.3);

}

/*** 下線（疑似要素） ***/
a:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
  visibility: hidden;
  opacity: 0;

}

/*** ホバー時の下線 ***/
a:hover::after {
  visibility: visible;
  opacity: 1;
  transition: 0.3s;
}

.logo {
  font-size: 28px;
}

/* ここまでヘッダー */

.top-view {
  padding: 0;
  /* height: 100vh; */
  background-color: coral;
  text-align: center;

}

.first-img {
  height: 730px;
  background-image: url(../img/top01.png);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ここまでトプ画 */

.main-section {
  height: 800px;
  background-color: rgba(194, 194, 194, 0.5)
}

.main-content {
  height: 800px;
  max-width: 1300px;
  display: flex;
  justify-content: center;
  align-items: center;

}

.main-h1 {
  background-color: #f0f0f0;

}

.main-item {
  margin: 0 5%;
  text-align: center;
  background-color: rgba(194, 194, 194, 0.5)
}

.main-item img {
  margin-top: 5px;
}

/* ここまでメインコンテンツ */

.second-img {
  height: 800px;
  background-image: url(../img/kokuban.png);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* 背景固定 */
.top-view {
  background-attachment: fixed;
}

.second-content {
  height: 800px;
  text-align: center;
}

.second-h1 {
  margin-top: 50px;
  text-align: center;
}

/* フッター */
footer {
  height: 42px;
  padding-top: 12px;
  border-top: black 1px solid;
  text-align: center;
  margin-top: 80px;
  background-color: rgba(194, 194, 194, 0.5)
}

footer p {
  font-size: 16px;
  
}

/* 背景固定 */



### 試したこと
直下の要素への`z-index` `margin-top`  `position: absolute;`による調整。
各要素の`height:vh;`の調整。



### 補足情報（FW/ツールのバージョンなど）
OS windows10
VSコード　ver1.81

ここにより詳細な情報を記載してください。

Comments

[yambejp]

それぞれの環境のOS、ブラウザの種類やバージョンは同じということでしょうか？

[karasuten]

コメントありがとうございます。
OS デスクトップ　win10　version 22H2
　　ノート　　　　win11　version 22H2

ブラウザ　両方ともchrome　ver 115です。

設定でどちらも拡大率を115％にしています。windowsでも10と11で違いがでたりするものなのでしょうか。そう言う場合、他のデザイナー、プログラマーはどういった対処をしているのか教えていただけると幸いです。

Answer 1

　スクリーンショットをよく見ると、同じ解像度のディスプレイであるのに文字の大きさがやや違っているように見えます。
『ディスプレイ』＞『拡大縮小とレイアウト』＞『テキスト、アプリ、その他の項目のサイズを変更する』の設定が異なる、ということはありませんか？

　当方で試したところ、Chrome のズーム倍率を125%にして、Windows の『テキスト、アプリ、その他の項目のサイズを変更する』を100%にするとひとつめのスクリーンショット、125%にするとふたつめのスクリーンショットに近くなりました。

Comments

[karasuten]

回答ありがとうございます。仰る通り、確認した所ノートpc側のブラウザの拡大率が大きくなっていました。
分かりやすい回答ありがとうございました。
重ねてすいませんが、自身で調べた所、こう言ったケースでは transform: scale(zoom_value); 等のzoomプロパティは推奨されないと記述されているサイトが多いのですが一般的にはどういったコードで処理をしているのでしょうか。教えていただけると幸いです。

[Lhankor_Mhy]

　簡潔に申し上げると、あまり対策をしないことが一般的です。理由は難しいからです。

　ビューポート依存のサイズを使うとズームレベルの影響を受けないため、たとえばご質問のケースだと #head{ height: 8vh }などとすれば、ある程度は解消されるのではないかと思います。
　しかし、その代わりにビューポートの影響を受けるので、たとえば、ブラウザウィンドウを小さくするなどして表示域高さ500px以下すると、ヘッダーのフォントがはみ出始めます。
　もちろん、フォントを含めたすべての単位をビューポート依存にすれば、この問題も解消できるかもしれません。しかし、その場合は、ズームレベルを変更しても文字が大きくならないので、アクセシビリティに問題があるだろうと思います。

　逆に、フォントを含めたすべての単位をピクセル単位（とそれに依存するパーセンテージ指定）にすれば、全ての要素の全てのサイズがズームレベルの影響を受けるので、レイアウト崩れを最小限にすることができるかもしれません。ご質問のケースですと、background-size: cover; を削除するなどです。レイアウトの自由度は下がりますが、こちらは達成できるかもしれません。

参考：
https://teratail.com/questions/4eqnldpr15844x#reply-f3xhzgic23unks