The first Sizzy update for 2020 is finally here!

Let's dig in 😍

---

Device-specific network settings

Previously we introduced "Network Throttling" for all devices.

Now, with the Network Manager, you can set a specific network speed for each device, separately.

• Default

• Online

• Offline

• Fast 3G

• Slow 3G

• Custom

  You can find the Network Manager in the menu of each device.

When the Network Manager for a device will be enabled, it will appear in the header icons, and it will have a dot with a color that will indicate the network speed of the device. You can also check the network speed by hovering the icon.

After refreshing all devices, each device will load according to the network speed set for it.

If the header icons are completely disabled, you will see a pulsing border around the device to remind you that the network speed has been limited.

---

New plugin: Design Mode

The content of Sizzy devices is now editable! Kinda.

Thanks to our new plugin "Design Mode" you can edit the content of any website. You can edit the text or delete some elements of a website directly inside Sizzy, so that you can quickly check how something would look like, before implementing it in code.

Design Mode is just to show you how the content would look like on the devices. The changes are not permanent, and they would be lost after refreshing a device. Also, they don't sync across devices.

---

New plugin: Choose Google Font

With the "Choose Google Font" plugin, you can test how the text of your website would look like with a different font style inside Sizzy.

You can choose from a variety of different Google Fonts, and apply them inside Sizzy devices. We'll add options for choosing font size, font weight, and font style in the next version.

The changes are not permanent, and they would be lost after disabling the plugin or reloading Sizzy.

---

New plugin: Debug styles

You can find this new plugin by clicking the little bug icon in the toolbar. This plugin allows you to debug the styles on your page by highlighting, hiding, and disabling some content on the page.

With the plugin you can:

• Outline all elements (or specific elements)
• Hide images or background images
• Hide videos
• Hide canvas elements
• Disable transitions
• Disable animations
• Show the z-index of elements
• Disable all styles
• Disable the browser styles
• Force visibility on all elements

etc.

We'll add even more debugging tools soon, so feel free to let us know if you have any ideas!

---

Move plugins from Settings -> Plugins into a separate icon in the toolbar

The Plugins are not in Settings anymore, we have created a separate icon for them in the toolbar to make them more easily accessible

---

Make Sidebar Scrollable

We have improved the left sidebar by adding a scrollbar. Now, no matter what's the size of your Sizzy window, you will always have access to all the features in the sidebar.

---

🐞️Additional Fixes and Improvements

• After refreshing all Sizzy devices, the log "scroll to even received" won't appear in the Console

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

The new Sizzy version is finally here! Let's dig in 😍

Configure Network Throttling

This feature allows you to test how your website will work on a limited connection. If you click the network button in the sidebar it will present a popup with all the options.

You can choose between Online, Offline, Slow 3G, Fast 3G, or set a custom speed.

When the speed is limited you're gonna get a little indicator that will remind you to reset the setting after you're done with testing. You can also set a custom upload and download speed when choosing "Custom".

In the next version, we'll allow you to choose a different speed per device.

Resize and Collapse Console

The console can easily be resized, you just need to grab the handle and drag. In this way, you can set the size according to your preference.

If you don't like to see the console, you can just collapse it by clicking on the collapse button.

Then, the console will stick to the right end of the app. But even though it is collapsed, you will be able to see the number of your logs. If you drag the console to the end, it will automatically collapse.

Another way to toggle the console is by using the semicolon ( ; ) keyboard shortcut.

Console Settings

If you click the little cog icon in the console a dialog for controlling the settings will pop up. Now everything is completely customizable.

Console background styles for the overlay console

Control Blur and Opacity

Control styles and icons for the logs

Filter Console logs

The console can get too cluttered with messages that are not important, so in the Console Settings, we have created a separate tab for filtering out the console logs.

Here you can filter out some messages that you never want to see again.

You can create as many filters as you want, and after creating them, you could enable or disable them. We added buttons to enable all, disable all, and delete all the filters. Created filters can also be edited at any time.

Another way of filtering out a message is by clicking on the little device icon next to each log.

Revamped the Title Bar for Windows and Linux

We have improved Sizzy's Title Bar UI for Windows and Linux. Now Sizzy looks the same on all platforms, and there's a lot more vertical space to work with.

On Linux and Windows you can now find the main menu by clicking on the top left menu icon.

Revamped UI for Organize Devices

We have changed and improved the look of the Organize Devices dialog. The biggest improvement is the highlight of the devices.

Now when you will hover over a device, you could clearly see which one you are selecting. We also docked the dialog to the right side, made it a bit smaller, and clearly separated the device name and device size.

Selectable messages in the Console Feed

We improved the Console feed by making the messages selectable.

Make Zen Mode configurable

In one of our previous releases, we have introduced the Zen mode, which gives you a "cleaner" working environment. You can toggle it by pressing Z.

We are happy to announce that with this release, we have made the Zen mode configurable.

In the General Settings, you will find a whole section devoted to the Zen mode where you can set up, according to your preference, which components to be hidden and which components to be shown when using Sizzy in Zen mode.

For example, you can hide the sidebar, but leave the Console shown. Or you can hide the Console but leave the presets shown. Or, you can hide everything in Zen mode and have only the devices shown. The choice is yours.

🐞 Additional Fixes & Improvements

• We fixed the license activation on some Windows 10 machines
• We made the app focused when using the Chrome extension or sizzy:// protocol, to open a URL
• We got rid of the custom scrollbars library we were using, and now all the scrollbars in the app are native

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

The new version is finally here, and it's completely packed with new features! Let's dig in! 😍

The Sizzy Console

The biggest change that we're happy to announce is the new Sizzy Console 🥳

Yes, Sizzy finally has a console, and you don't have to open the dev tools in order to see your console logs anymore 🙌

The logs are divided in 3 categories, and you can toggle them and clean them separately:

• Logs
• Warnings
• Errors

You can display the messages for all the devices, or you can select a specific device. Using the search box you can filter the console logs.

Console Position

You can move the position of the console to the bottom or the right side. We'll allow you to resize the console soon.

In case you have too many messages, you can just click on the "scroll to bottom" or "scroll to top" buttons.

Console Type

You can change the type of the console by clicking on the "Switch Type" button. There are 3 different types:

• Docked (Will take space on the right/bottom)

  

• Overlay (Will be shown as transparent overlay over the workspace, on the right, or on the bottom)

  

• Bubble Overlay (Similar to overlay, but when it's minimized, it's gonna turn into a little bubble on the right)

  

---

✅ Extensions for DevTools

From the Settings you can now enable extensions for the DevTools:

Unfortunately, this only works on macOS and Linux for now, because there's some Electron bug for Windows that's preventing us to add it. We'll add it as soon as the bug is resolved!

---

✅ Floating Toolbar

In Photo Studio and in Float mode, we have introduced the Floating Toolbar. The Floating Toolbar has a few actions that can help you organize your floating devices better. The first two buttons are for snapping the devices to a grid or to the center.

If the Floating Toolbar is taking too much of your space, you can always collapse it.

---

✅ Selection mode

In addition to the alignment, in the Floating Toolbar we have implemented Selection mode. The selection mode can be enabled just by clicking on the "Toggle Selection Mode" button. If the mode is enabled, on the toggle button a green dot will appear as an indication that currently, you are in Selection Mode.

You could already move and resize devices if the device frames, the device header, and the Browser UI were visible. However, if they're not visible, it was not possible to select, move, and resize devices.

When Selection mode is enabled, you can click to select a device and perform a number of actions. For example, sometimes in Float mode, the devices can overlap each other. Now with the Selection mode, you can bring a device to the top, or move it to the bottom by clicking on the "Move to Top" or "Move to Bottom" icons.

If the header icons are disabled, you can still find and perform all the actions just by selecting a device. The header menu will be shown inside the selected device.

Selection Mode allows you to perfectly align all the devices however you want and maximize the available space. This way, you can fit more devices even if you're using a small monitor. Then, after you get the perfect layout, you can save them as a preset.

We also added some helpful keyboard shortcuts while selection mode is enabled:

• You can also use the left and right arrow keys to switch between devices
• You can use Cmd or Ctrl + Arrow keys to move devices by 1 pixel
• You can use Shift + Cmd/Ctrl + Arrow keys to move devices by a few pixels

---

✅ Space between devices in Float Mode

Just like in any other mode, you can use the "Space between devices" option in Photo Studio and in Float mode, as well. But in order for the spacing to take effect in these two modes, you will need to re-align the devices using the Floating Toolbar.

If you do not re-align the devices, the spacing won't take effect, accordingly.

---

✅ Accessing the device menu when header is not shown

Another way of accessing the device menu is through right-clicking on the device. For example, when the header icons are off, you can find the menu just by right-clicking on the device. This option is available in all modes.

✅ View Mode and Align Mode when the sidebar is collapsed

Now when the sidebar is collapsed, you can still set the View Mode and the Align Mode. Previously you had to expand the sidebar in order to change the modes.

✅ Toggle for Touch cursor and Mouse pointer

In the left sidebar, we have added a toggle button that allows you to easily toggle the touch cursor. Keep in mind, that the touch cursor works only if you're clicking inside a device.

---

✅ Separate Theme settings from Device settings

We have divided the Configure Theme popup into two separate sections: Device Theme and App Theme. Since the two sections are being focused on two different things, it made more sense to divide them into two separate tabs.

• Device Theme

The Device Theme section concerns the layout of the devices. You can choose whether you would like to see the frame of the devices, their type (minimalistic or normal), their color, etc.

• App Theme

The App Theme section allows you to change the theme of Sizzy. You can make the theme according to your preference: color, gradient or image.

---

✅ Correct Screen Dimensions

In order to show you that Sizzy cares about delivering the most precise results, we added a button for toggling Correct Screen Dimensions, in case the OS/Browser UI is disabled.

For example, the screen height of iPhone 11 Pro is 812px. However, you don't get access to the entire height, because a part of it is reserved for the OS and Browser UI.

If you disable the OS and Browser UI, and still want to limit the viewport to the correct size, you can now click "Correct screen dimensions" and you'll get the correct size. This way, you'll save space and you'll be able to display more devices on screen.

The reason for this feature is because the viewport dimensions may not be correct if the Browser UI is disabled.

---

🐞 Additional improvements and fixes

• Moved the screenshotting to a separate thread (it should be faster now)
• Cmd/Ctrl + L works when a device is focused
• Bug fixes and perfromance improvements

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

We know, you're tired of hearing it, but we're working hard on bug fixes and improvements! We want to make Sizzy as stable as possible before we continue adding new features (and boy oh boy do we have tons of ideas!)

🔥 CPU/GPU issues

In this release, we (hopefully) got rid of all the CPU/GPU issues, so your computer isn't stressed out when running Sizzy 🧘‍♂️ If you want to increase the performance even more, you can disable the devices that are not currently visible by going to Settings -> Performance.

💅 New toolbar look on macOS

The Sizzy toolbar got a fresh coat of paint on macOS!

• The title bar is gone
• The window controls are merged with the rest of the toolbar
• The icons are smaller
• The URL bar is smaller and centered
• Overall more compact design

This gives you more vertical space to work with. You can still move the app around by dragging on an empty space in the toolbar.

Why is the new look on macOS only? The main menu on macOS apps is separate from the app window, which makes it easy to achieve this look. On Windows 10, the menu is attached to the app window, and Electron doesn't provide an easy solution to achieve this UI. However, we'll have some ideas in mind, and we'll try to find a custom solution for Windows and Linux in one of the future releases, so stay tuned 🙌

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

This release is also focused on bug fixes and improvements so there are not a lot of shiny things to play with. However, we have added a few features as well, so let's see what we have:

Navigation Sync is now a visible plugin in the toolbar

This allows you to easily disable/enable the navigation sync from the toolbar and also switch between Navigation Mode v1 and v2.

Absolute Scroll Sync

We added a toggle for switching between normal scroll syncing, and absolute scroll syncing. Absolute Scroll Sync is useful if you're using the Page Navigator or Scroll To Element plugins to navigate all devices to a certain section, and then you want to scroll in a device, and the rest of the devices to scroll with the same amount.

Previously, this wasn't possible because after the first scroll all the devices would jump to a different position, based on the scroll percentage. You can try and switch between the two modes and see the difference.

Partially Reset Config

Now when resetting the config through the Main Menu -> Settings -> Reset Config, you can choose which things to reset instead of resetting the entire config. This way you can preserve your presets, custom devices, etc.

Disable smooth scrolling for Page Navigator and Scroll To Selector plugins

Now in Settings -> Plugins you can disable smooth scrolling for these two plugins, which makes navigation instant.

👌 Improvements

• Improve the responsiveness of the cancel button when cancelling all screenshots at once.
• Replace iPhone XR with iPhone 11 (same resolution and dimensions)
• Replace iPhone XS with iPhone 11 Pro (same resolution and dimensions)
• Fix sync scrolling for pages where body is scrollable instead of document
• Show all the possible options in the device menu when in Zen mode
• Now you can use the "screen resolution" variable in the screenshot name
• Popups are properly tethered to their respective icons
• Add Photo Studio keyboard shortcut: P

🐞 Bug Fixes

• On Windows, the buttons of Sizzy activation window are partially hidden.
• When making a screenshot with frame the layout of the browser UI gets messed up
• It's not possible to cancel a full-page screenshot of one device
• Cloning of devices with browser UI doesn't work properly

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

You know that moment when you read "bug fixes and improvements" in a changelog and you hate it? Well, we're sorry, but we have an entire changelog focused on bug fixes and improvements. We added a couple of small features, but for the next few weeks we'll focus on the stability of the app.

⚡️ Performance tab in settings

We understand that not everyone has a powerful computer with a lot of RAM to spare, so we added options for offloading some devices from memory when they're not visible. Now you can choose which devices should be kept in memory when switching between different modes and filtering devices.

Please note that when devices are not kept in memory they will refresh the next time they appear on the screen.

🛠 Revamp screenshot settings

Now in Settings -> Screenshots you can choose what the camera icon does for each device, and you can choose what the "Screenshot All" button does in the sidebar.

📸 (Full) Screenshot All

Yeah, yeah… finally! 🥳 We now allow you to take full-page screenshots of all devices at once. You can enable the behaviour from Settings -> Screenshots by changing the action of "Screenshot All".

♻️ Reload CSS plugin

If you enable this plugin from Settings -> Plugins you will get a "Reload CSS" button in the toolbar which allows you to refresh the CSS of a page without reloading the entire page.

👌 Other improvements:

• Upgrade to Electron 6
• New keyboard shortcut: - to jump to resizable mode
• New keyboard shortcut: + to jump to full mode
• Cloned devices keep frame and browser UI
• A filter should get deactivated if all devices satisfying that filter are removed
• Disable "Screenshot All" when there's only one visible device

🐞 Fixes

• Fix: Some devices won't navigate to new URL
• Fix: 100% CPU crash on Windows (it was bug in Electron)
• Fix: Photo Studio cannot save screenshots on Windows
• Fix: Chrome extension doesn't work
• Fix: Devices aren't navigating to the same section using the navigator plugin

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

Presets

Introducing Sizzy Presets - a special feature that allows you to save a preset by combining any of these properties:

• Currently visible devices
• Theme (along with background and all the other settings)
• Preferred zoom percentage (individual per device + global zoom)
• Align mode (Horizontal, Vertical, Float, Center, etc.)

You can combine any of these properties and save them as a preset. Example of presets:

iOS devices + theme + zoom level + horizontal align

iPhone + iPad + float align

Mix of devices + center align + no device headers

Green background gradient + minimalistic frames (this is like a "custom theme", because this preset doesn't replace the list of devices, it just applies the theme settings)

This feature is really time-saving because with just one click you can quickly switch your entire setup. You can create as many Presets as you want and they will be available as tabs below the URL bar. Presets can be deleted and updated at any time.

Keep in mind, there's no such thing as "selected" preset. When you click on a preset tab, a preset is being applied. If you want to change a preset (add/remove devices, switch theme settings etc.) you need to click on the "update existing preset" button, and you'll be able to choose which preset to update.

Screenshot devices with frames

Now, screenshots are even more realistic with this new feature. A screenshot of a device can be taken together with its frame and browser UI. In order to enable it, visit:

Settings → Screenshots -> Screenshot icon action → Take viewport screenshot with device frame and browser UI.

This feature is also available when screenshotting all devices at once.

Revamped Filters

We're aware that the previous way of filtering devices might've been a little bit confusing, and it also didn't work when the sidebar was collapsed.

That's why we improved the UX for filtering. Now when filtering devices, some filters will be automatically disabled, so you don't end up with an impossible combination and an empty device list.

The filters are divided by OS (iOS/iPadOS, Android, macOS, Windows) and Type of device (Phone, Tablet, Laptop, Desktop).

Optimize CPU usage

We worked on improving the performance of Sizzy, and we decreased the CPU usage while the app is idle from 30% to 0% 🥳
We're working on more performance improvements and the app will be even faster in the future.

Other improvements

• CMD + H shortcut for hiding the app
• Add Windows and macOS in the OS filters
• ESC will close the Page Navigator and Navigate To Element plugins

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

📸 Sizzy Photo Studio

Introducing Sizzy Photo Studio - a special mode where your pretty designs can pose for a pretty picture. Configure the devices however you want, move them around, resize and rotate them until you get them in the perfect position. Then just press the shutter and you'll get a pretty screenshot ready to share wherever you want. We have way too many ideas about the future of Sizzy Photo Studio, and we can't wait to share them with you!

Set Gradient Background

Custom background colors are great, but they can get kind of boring. Now you can pick from a huge list of gradient backgrounds!

Set Image Background

Gradient backgrounds are great, but they can also get kind of boring 😂️ Now you can pick from a predefined list of images, or add your own custom images!

View Variations

We split the different view variations in Sizzy in Mode and Align.

Mode:

• Default (list of the devices)
• Focus (one device at a time, navigate with arrows)
• Full (one device that takes full width and height)
• Resizable (one device that can be resized)

Align:

• Grid
• Horizontal
• Vertical (New)
• Center (New)
• Float (New)

Float Align

When Float is selected from the Align options, you can freely move devices wherever you want. Move them around, rotate them, and increase or decrease their size until you find the perfect layout.

Drag to zoom in/out

Now you can drag the bottom-right corner of each device to change its individual zoom level. This is way easier than clicking the - and + buttons.

Kill Port Plugin

We added a new plugin which allows you to easily kill a port on your machine. This can come in handy if you have a local development process that's too stuborn! Don't forget to enable it from Settings -> Plugins.

Colors for Minimalistic Device Frames

Previously you could choose between Black and White device frames when the minimalistic setting is on. Now you can choose between Gray, Black, White, and Color. When Color is chosen, you can pick a different color variation.

Customize space between devices

Everyone has a different screen size and wants to squeeze as many devices as possible on it. Now, you can customize the space between devices using a simple slider.

Setting to disable all tooltips

Tooltips can be annoying if you're a pro user. Now you can completely disable them for the entire app if you go to Settings -> General and you toggle the setting off.

Support for macOS Catalina

Even though macOS Catalina is still not released, there are a bunch of thrill-seekers that are already on the beta version. Apple requires apps for macOS Catalina to be notarized, and now Sizzy has joined the notarized gang 😎 (that's totally not a real gang)

Other improvements

• Fixed crazy reload problem
• Fixed overlapping icons in browser UI for desktop and laptop
• Minor bug fixes

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

Add frames for devices

All default devices have real device frames now. Of course, you can toggle the frames according to your preference. The ability to add custom frames for devices is coming soon.

Minimalistic device frames

You can also toggle an option to make all the frames more minimalistic. For now, they can be gray or white, but soon you'll be able to pick any color.

Theme and UI configuration

We have some good news and bad news. The default Sizzy themes are gone. That's it. That's both the good news and the bad news 😅 Now you can choose a custom background color that will affect the entire app. More customizations and completely custom themes are coming soon!

Add Windows 10 UI

We added Windows 10 UI for some desktop and laptop devices, so now you get a more accurate representation of the viewport height. It also looks prettier.

Android and Chrome UI

We added Android and Chrome UI elements for Android devices. Now you get a more accurate representation of the viewport height, especially on devices that have a notch and need some more space for the status bar (Galaxy S10, Pixel 3XL). Yes, yes, we know, dark mode for the UI is coming soon.

Override user agent for all devices

If for some reason you want all of your devices to have the same User Agent, you can now do that with the User Agent Override plugin, that you can enable from Settings -> Plugin.

After choosing a User Agent, you can close the popup window, and there will be little green indicator icon to let you know that the override is still there.

Individual zoom for devices

While phones are pretty small, and you can see them properly at any zoom level, we have some devices like the iMac and MacBook Pro which can be huge at 100% zoom. So we added individual zoom per device, that's gonna be relative to the global zoom.

That means that the individual device zoom is gonna be combined with the global zoom, instead of completely overriding it. By default, we zoomed out the big devices to 75%, but you can change that at any time.

To change a device's individual zoom you can just click on the zoom level that's next to the device's dimensions. To exit, just click the "x" icon or press ESC.

Automatically adapt device header icons based on the device's width

Previously, the device header would adopt to the global zoom of the app, which doesn't make a lot of sense because some devices are smaller, some are bigger, some might be in landscape etc.

Now the functionality for detecting which layout to present has been improved, and it's using multiple factors to find the correct layout for the header. You can still choose between the different header modes in Settings -> Device.

---

Other improvements

• Keep scroll position after refresh
• Export/Import devices and settings
• Use F5 to refresh
• Allow rotating all devices when in horizontal or focused mode
• Allow zoom in horizontal mode
• When changing Pixel Ratio on a device it will automatically refresh
• Register first click when Sizzy is not focused (useful when used in split-screen with code editor)
• Add a minimum size restriction for the main window
• Set initial zoom for big devices to 75%
• Add a link to Help Center in Settings -> About

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

🧪 Alpha & Beta update channels

Now you can live on the edge and get Sizzy updates more often. If you go to Settings -> About you can switch the update channel to Alpha or Beta.

We're aiming to release alpha versions more often, and a few beta versions before the official release. The update will be automatic so you don't have to manually download or install anything.

Note: you can always switch back to a more stable channel and the update will be automatic.

🖥️ Add UI elements for desktop Chrome and Safari on macOS

We're making progress towards adding UI for all the devices in Sizzy. In this update we added:

• macOS dock
• macOS status bar

Safari browser

Chrome browser

Again, this is not only a cosmetic change. This will affect the height of each viewport, so you get a more accurate representation of what you would see on a real device.

📲 Add DPR setting for each device

Now you can specify the Pixel Ratio for each device. We already added the correct DPR for the default devices, and you can update the custom ones that you have added manually.

Now the srcset attribute should work properly for images, yay! 👍️

✅ Detect if your app is running in Sizzy

If you want to detect if your app is running in Sizzy, you can do that by checking if the window.__sizzy object exists. It might be useful to do this check if you want to disable animations, switch a theme, do some A/B testing etc.

Sizzy adds extra info about each device to the window.__sizzy object. Here's how a sample object would look:

 {
      totalDevicesCount:8,
      device: {
            index: 3,
            name: "iPhone 7",
            id: "iphone-7"
        }
    }

This information is useful because you can use it to activate different features, themes, etc. based on the device name or the device index.

Example

Let's say that our app has 2 themes, dark and light, and we want to test both of them in Sizzy. So we want every device to have a different theme instead of switching between the two themes.

We can write this code:

    const sizzy = window.__sizzy;
    const darkTheme = sizzy.device.index % 2 === 0;

So then in our code we can easily set the theme to dark for every second device.

A/B testing

You can also use this information to enable/disable a feature on some of the devices. This is pretty useful for A/B testing.

Demo

We published an example here.

Try opening this url in Sizzy.

---

🛠 Other improvements

• Add Galaxy S7, S8, S8+ devices
• Sizzy will remember the size and position when it's closed, and when it's open again it will launch with the same size and position
• Add "Hide Application" in the menu (macOS)
• Bug fixes and stability improvements

---

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌