はじめに
「普段は画面の横幅いっぱいに表示されてほしいけど、ブラウザの拡大率を操作したら拡大はされてほしい」を出来るだけ簡単に（雑に）実現する。
（ブラウザ依存、PC以外の動作は見ていません）
背景
普通は、
- 要素のwidthを100%にする
- Viewportで調整する1
で、解決すると思いますが、
例えば、対象の要素を直接触れないとか、画面ないの一部の要素だけに適用したいとかで使えない想定。
方針
transformでどんなサイズでも合わせてしまえばいいじゃない
結果
CSSだけで実現できないかと思ったが、早々に断念しJavascriptを利用。
（Javascriptを使うのであれば如何様にもやり方はあると思うが）
- スクロールバーに対応してない
- ほかのWidth:100%のものと横幅が合わなくなる
あたりは対応していない。
※Windowにfitするように試してるのでCodePenだと確認し辛いです。
See the Pen Element Window Fit Test by minilabo (@minilabo) on CodePen.
試したこと
CSSだけで実現
最初はCSSだけで実現できないかと試したが、scale + calcを上手く扱えず、時間がかかりそうだったので断念
example.css
/* 計算結果の単位のせいか適用されない */
.ng {
transform: scale(calc(100vw/2))
}
/* これだと動く */
.ok {
transform: scale(calc(100/2))
}
諦めてJavascript使って動的に適用する
Javascriptで大きさを合わせるだけだと拡大率などに関わらず、Windowに合うだけなので、そのあたりの情報を調査する。
- 拡大しているかの判定
innerWidthが表示領域、outerWidthがwindowの大きさを表す。
ブラウザの機能で拡大するとinnerWidthが小さくなるので、outerWidthに比べてinnerWidthが小さい場合、拡大されている。
main.js
// スクロールバーなどが含まれる為、このまま計算すると少しずれる（が、雑に丸める）
const zoom = Math.round(window.outerWidth / window.innerWidth);
- transformでサイズを変更しても親の要素のサイズに反映されない
element.getBoundingClientRect()で高さを取得して、親要素に適用（単純にelement.offsetHeightだと、transform前の大きさがとれる）
この関数はとても便利だが、環境によってはダメかも？（参考: https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect）
main.js
// tramsformの適用後の高さを取得して、親要素に適用してスペースを確保（今回は高さのみ）
parent.style.height = element.getBoundingClientRect().height;
-
Viewportで初期の拡大率を1以下にすると問題があるよという記事を見たので参考に > もう逃げない。HTMLのviewportをちゃんと理解する ↩