7

css-values viewport-relative-lengthsを適切に使用する方法に従って? 、次の方法でビューポート単位を使用して、大きなモニターで小さなページを自動的に拡大しようとしました:

/* automatically magnify business-card-style page in large viewports */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 150% magnification at 75em */
  html {font-size: 2vmin;}
}

ただし、Google Chrome でテストすると、ズーム機能がほとんど機能しなくなりました。

ズームが上記のコードですぐに動作を停止するのはChromeのバグ/機能ですか、それとも設計と仕様によるものですか?

4

1 に答える 1

1

定義によると、vw/vh/vmin/vmax は、ビューポートの幅に関連する単位です。

  • vw ビューポートの幅の 1% を基準に
  • vh ビューポートの高さの 1% を基準に
  • vmin ビューポートの*小さい方の寸法の 1% に相対的
  • vmax ビューポート* の大きい方の寸法の 1% に対する相対値

div{
  height: 3rem;
  border: 1px solid red;
  margin: 1rem;
}
 The following div has style="width:10vh"
 <div style="width:10vh"></div>
 The following div has style="width:10vw"
 <div style="width:10vw"></div>

例でわかるように、ウィンドウのサイズを変更すると、div の幅が変化します。ズームを適用してもビューポートのサイズが変わらない場合、変更は適用されません。

viewportHTMLヘッダーのメタタグに設定されている追加のプロパティを確認し、ズーム時にスケーリングする方法をブロックしているかどうかを確認する必要があるかもしれません。この記事は、 https://css-tricks.com/snippets/html/responsive-meta-tag/を確認するのに役立ちます

于 2018-06-14T09:01:12.627 に答える