0

ウェブサイトの制作初心者、初質問です。
ページのヘッダーを画面の先頭にposition:fixedで固定していたのですが、
サイトがスマホのみのレイアウトのためpcでみた時は少し大きく表示したいとのオーダーがあり、
zoomプロパティはfirefoxで使えないためhtml要素にtransform:scale();を使って画面幅が768px以上の時は1.25倍で表示するようにしました。

@media (min-width: 768px) {
    html {
        transform-origin: top center;
        transform: scale(1.25);
    }
}

もちろんtransformを設定してから知ったのですが親要素にtransformを設定すると子要素のposition:relativeが効かなくなる、とのことでjqueryを使って画面上部に固定しようと考えております。

ヘッダーと同階層でtransform:scale();する方法も試しましたが、ざっくり書くと

<ヘッダー>
<本体>
<フッター>

のようになっており、全部1.25倍すると本体とフッターの内容が被ってしまうためやめました。

しかしjqueryはさらに初心者であるため画面の上部を取得する方法すらわからず、ネットで調べてもposition:fixed前提の記事ばかりでなかなか目的の記事にたどりつけず、こちらで質問させていただきました。

まとめるとposition:fixedを使わず、transformの位置も動かさずにjqueryなどを使ってヘッダーを画面先頭に固定したいです。

初質問で何かと至らぬかもしれませんがどうぞよろしくお願いいたします。

3
  • transformで拡大するのではなくて、fiexedのままにmediaクエリを利用して、ヘッダーの要素を大きくすればいいと思いましたが、それだと何か問題がありますか?
    – keitaro_so
    Commented 2022年3月14日 5:13
  • すみません、メディアクエリで要素内のフォントサイズなどを全て1.25倍していくという解釈であってますか? 普段ならそうするのですがサイト自体はもう完成しており、なおかつスマホの見え方のまま大きくするというオーダーなので個々の要素の大きさはいじれない、というか量がそれなりにあるので公開近くの今からやるのは避けたいと言った感じです。
    – Azuver
    Commented 2022年3月14日 5:49
  • コストやスケジュールが厳しい要件の変更なんですね。失礼しました。
    – keitaro_so
    Commented 2022年3月14日 6:04

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。