開発コストを削減「BiTT開発」って?
開発コストを削減「BiTT開発」って?
2019.09.03
#198
それいけ!フロントエンド

No more worries about iPhone SE / 5s / 5! Easy scaling down with Viewport Extra

つっちー

Hello. I am Tsuchi, a front-end engineer.

Over the past few years, the screen size of smartphones has been increasing.
Currently, 360px and 375px wide devices are the most common.
Therefore, in many cases, we will want to optimize our smartphone design to 360px or 375px wide devices.

However, this often causes problems with 320px wide devices.
For example, unintended line breaks may occur in the heading, or side-by-side elements may protrude from the frame.
Increasing breakpoints to solve them is tedious because it increases the style.
There are fewer users of 320px wide devices than before, but they still exist.

We want to solve this somehow.
So I made it!

Viewport Extra

About Viewport Extra

Viewport Extra enables you to set minimum and maximum widths for viewport by rewriting the meta tag.

On screens where the display width is narrower than the minimum width, the appearance at the minimum width is scaled down while maintaining the ratio.
In other words, the width of the meta[name=”viewport”] tag is fixed to the minimum width value.

On screens where the display width is wider than maximum width, the appearance at the maximum width is scaled up while maintaining the ratio.
In other words, the width of the meta[name=”viewport”] tag is fixed to the maximum width value.

For example, if the minimum width is set to 375px, the iPhone SE (320px width device) will scale the appearance on the 375px width device down to about 85.3% and display.

It fits the screen perfectly and no extra horizontal scrolling occurs, because the initial-scale value of the meta[name=”viewport”] tag is rewritten at the same time.

Usage of Viewport Extra

It’s very easy to use.

  1. Set the viewport as usual.
  2. Load Viewport Extra with a script tag.
  3. Execute new ViewportExtra in a script tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Script tag must be put just after viewport setting. -->
<script src="https://cdn.jsdelivr.net/npm/viewport-extra@1.0.4/dist/viewport-extra.min.js"></script>

<script>
  // If setting only the minimum width.
  new ViewportExtra(360)

  // If setting both minimum and maximum width.
  new ViewportExtra({ minWidth: 360, maxWidth: 414 })
</script>

And you’re done!

It is important to place a script tag just after the meta tag.
This will apply the scaling immediately and will prevent scaling down or up after HTML rendering.

Demo

Here is a comparison of the page optimized for a 375px device with and without Viewport Extra applied.
Reproduce 320px wide device using browser developer tool.
HTML and CSS are following (not including the script tags).

See the Pen
201902-en
by ligdsktschy (@lig-dsktschy)
on CodePen.

Without Viewport Extra applied

Viewport Extraを適用しない場合
Extra horizontal scrolling is occurring.

With Viewport Extra applied

Viewport Extraを適用した場合
It fits the screen perfectly!

Summary

Viewport Extra will surely help you, until the share of small devices is further reduced or restored again.
Try it out! Thank you.

2