タイトルの通り、ブラウザ幅を狭めても、各要素のサイズ比率を維持したまま小さくするブックマークレットを作成しました。
注：レスポンシブデザイン対応のページではうまく動きません
下記リンクをブックマークに保存して試してみてください。
ブラウザ幅縮小
このブックマークレットを使ったサンプルイメージは下記です。
中身は下記のようなコードになっています。
(() => {
// ブックマークレットを実行した時のブラウザサイズを保持
// もし、横幅1920pxの時のサイズの比率を保ちたいなら、「window.innerWidth」の箇所を「1920」とする
const w = window.innerWidth;
// Bodyタグ
const b = document.body;
// ブラウザ幅縮小用のCSS指定
b.style.setProperty('--scale-width', '1');
b.style.transform = 'scale(var(--scale-width))';
b.style.transformOrigin = 'left top';
b.style.height = 'calc(100%/var(--scale-width))';
b.style.width = 'calc(100%/var(--scale-width))';
// ブラウザ幅を変更した時のイベント
window.onresize = () => {
b.style.setProperty('--scale-width', window.innerWidth / w);
}
})()
CSSのtransformプロパティのscale関数を利用し、bodyタグ内全体のサイズを変更しています。
下記ページを参考にして作成しました。
【CSS】画面全体をブラウザで拡縮した時と同様の結果を得るCSS – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発
ブラウザの機能に拡大・縮小機能があるので、やってることはそれと似たようなことなのですが、もう少し細かい調整ができます。
横幅を狭くするとデザインが崩れるサイトについて、文字サイズが小さくなってもいいからそのままの比率で縮小したいという時には便利だと思います(そうそうないと思いますが、業務Webシステムではちょくちょくあるような気がしてます)。
最初にも書いたように、レスポンシブデザイン、具体的には「@media (max-width:○○px)」を指定したスタイル指定がされているページではうまく動かない可能性があります。なぜなら、この指定はBodyのサイズではなく、ウィンドウサイズを元にスタイルを変更するようになっているからです。
ただ、最近話題の、コンテナクエリが主流になってきたら、うまく機能するかもしれないですね。
参考ページ：コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
コンテナクエリについても注目していきたいです。
コメント