Help us understand the problem. What is going on with this article?

[HTML/CSS] ある要素をWindowに無理やり合わせつつ、拡大率に対応する

はじめに

「普段は画面の横幅いっぱいに表示されてほしいけど、ブラウザの拡大率を操作したら拡大はされてほしい」を出来るだけ簡単に(雑に)実現する。
(ブラウザ依存、PC以外の動作は見ていません)

背景

普通は、

  1. 要素のwidthを100%にする
  2. 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;

  1. Viewportで初期の拡大率を1以下にすると問題があるよという記事を見たので参考に > もう逃げない。HTMLのviewportをちゃんと理解する 

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away