採用技術にフォーカスしたWebサイトリンク集。
トレンドリサーチや技術選定の参考に、WEBデザインやコーディング、開発の参考にも使えるWebサイトギャラリー。
Check WebTech

Viewport Extra が採用されたサイト事例一覧です。

Viewport Extra enables to set min-width and max-width of viewport, by overriding the content attribute of the viewport meta element. It will reduce the range of viewport that have to be considered when styling.

For example, on devices with a display width of less than 375px (e.g. iPhone SE 1st Gen), if a page with a width of 375px or more is displayed, there will usually be horizontal scrolling. In such a case, you can set the min-width of viewport to 375px with Viewport Extra, which will scale the page down to fit perfectly into the 375px display width and remove horizontal scrolling.

(DeepL翻訳)
Viewport Extraは、viewport meta要素のcontent属性をオーバーライドすることで、ビューポートの最小幅と最大幅を設定することができます。これにより、スタイリング時に考慮しなければならないビューポートの範囲が狭くなります。

例えば、ディスプレイの幅が375px未満の端末(例:iPhone SE 1st Gen)では、375px以上の幅のページを表示すると、通常は横スクロールが発生します。そのような場合、Viewport Extraでviewportのmin-widthを375pxに設定すると、375pxの表示幅にぴったり収まるようにページが縮小され、横スクロールが解消されます。

https://www.npmjs.com/package/viewport-extra
<広告>
<広告>