I tried using 'Sizzy', a service that allows you to check the display on various smartphones and tablets of the website at once.

When creating a website, it is difficult to cover everything about how the website is actually displayed on devices with different widths and sizes for each manufacturer. However, if you use software called ' Sizzy ', you can check the display of each device such as iPhones of successive generations and tablets of each manufacturer at once, so let's check what you can actually do with Sizzy. It was.

Sizzy

There are four types of Sizzy plans, 'Solo', 'Trio', 'Team', and 'Enterprise', and you can choose to pay monthly or annually. This time we will be using the monthly Solo plan, so select 'Monthly' and click Solo's 'Try for Free'.

It is said that this plan has a 14-day free trial period. Enter your email address and click 'Next'.

Next, the country selection screen is displayed. Select 'Japan' and click 'Next'.

It's free for the first 14 days, but you'll need to register your payment method before you can create an account. You can choose card or PayPal, this time I clicked 'Pay with card'.

Enter your card information and click 'Subscribe Now'.

Next, the license key code will be displayed, so make a note of it or copy it. Click 'Download Sizzy' to start the download.

Click 'Save File'.

The following file will be downloaded, so double-click it to execute it.

Enter the registered email address and the copied license code and click 'Activate license'.

It is OK if Sizzy starts and the top page is displayed as shown below.

Sizzy is software that allows you to check the display of browsers on multiple smartphones, tablets, and PCs at once. Enter the URL you want to check in the address bar at the top ...

You can check the display of each device in a row as shown below. In version 0.38.0 at the time of writing the article, 6 types of iPhone 11 Pro, Pixel 3XL, iPad Pro 11, Nexus 7, MacBook Air, and Desktop were registered as default devices.

Each device can also be operated by clicking and scrolling. Also, the operations of each device are synchronized, for example, if you click the link in the red frame from one device ...

All devices will switch to the linked screen at the same time.

Click on the horizontally long rectangle at the bottom left of the Sizzy window ...

You can check the display when the smartphone or tablet is turned sideways at once.

If you want to switch the device type to check the display, click 'Device Drawer' on the top menu bar.

'Available Devices' displayed on the left side is a list of devices that can be added, and 'Visible Devices' displayed on the right side is a list of devices that can be confirmed on the top page.

By dragging and dropping the device you want to display from the left side to the right side, you can add the device that can be confirmed on the top page.

As the number of displayed devices increases, it becomes difficult to check, so you can use 'Filters' to narrow down the devices to be displayed by type.

For example, if you check 'iOS / iPad OS', you can display only iPhone and iPad.

You can also save the display confirmation device type as a set. To save the current display, click 'Save Preset' from 'Presets' on the top menu bar ...

Enter the preset name and click 'Save' to complete saving.

To open the preset again, select the preset name you want to open from 'Presets'.

Besides, when you enter the CSS selector, the element is displayed on all screens 'Navigate to'
It has 'selector', a function to freely try Google fonts, a function to edit elements on the page, and a 'Debug Styles' mode that allows you to easily determine which CSS is displaying which part. In addition, only the size of the browser user agent and viewport can be simulated with Sizzy, and differences in rendering engine etc. are not taken into consideration.

The price of Sizzy is $ 7 (about 737 yen) per month for the 'Solo' plan that can be installed on one terminal, and $ 5 (about 526 yen) per month for the annual plan.