"Filling the screen" with your in5-exported content can be interpreted in a lot of different ways. This article addresses the various options for filling a screen.


Filling the viewable area in a browser


Scaling

If you'd like to make your content fill the visible area below the browser chrome (the open tabs, the address bar, any extensions, bookmarks, etc.), then you can use a variety of scaling options. These options scale the content proportionally.


Be aware that if the aspect ratio of your content is different from the aspect ratio of the viewable area in the browser, then there will be a gap. Depending on the orientation of the content and the scaling applied, there could be a gap below the content or on one or both sides of it.


Responsive Layouts (requires a Gold plan or higher)

You can minimize the appearance of gaps on either side or below the content by creating alternate layouts that target various aspect ratios and exporting your content as a Responsive Layout with in5.


Liquid Layouts

Liquid Layouts expand to the width of the browser and let you reflow content based on rules that you set up. With a Liquid Layout, you'll need to make sure that your content doesn't overlap or make the frames that contain your text too narrow when the content is viewed on a browser that has a much smaller width than the original design. You can use Liquid Layouts in conjunction with Responsive Layouts to address overlap and make content fit better for screen sizes.


Filling the entire screen without any visible browser chrome


There are a few ways that you can make your in5-exported content fill the screen without any of the browser chrome showing, but these methods first require user interaction.

Viewer Display (requires a Pro plan or higher) 

The Viewer Display is a bar that includes a variety of options for users to navigate and view content and provide additional information. These options can be selected during export (in5 > Export HTML5 with in5...) and include a Fullscreen button. 


When the Viewer Display Fullscreen button is pressed, the browser chrome becomes hidden, and the content expands to fill that space if a scaling option has been applied.


There may be gaps along the edges of the content. If there are, then try using the scaling, Responsive Layout, or Liquid Layout options mentioned above to fill the viewable area. 


Presentation Mode (requires a Pro plan or higher)

Presentation Mode (in5 > Enhancements > Presentation Mode) offers another option to hide the browser chrome when viewing your in5-exported content. This option lets the user double click to toggle on or off full screen mode. 


The content does not need to have the Viewer Display applied to enable this fullscreen option. Just as with the Viewer Display, this fullscreen option would need to be used in conjunction with other scaling, Responsive Layout, or Liquid Layout options to address any gaps around the edges. Scaling would be required to expand the content into the space where browser chrome was previously visible.


Web App

With in5, you can export a Web App which is HTML5 content that runs in the browser but can look like a native app on a mobile device. Once the web app is installed on a mobile device, it doesn't show the browser chrome.

As is the case with the other options that remove the browser chrome, any gaps along the edges of the content for content that is a different aspect ratio from the device where the content is being viewed would need to be addressed by the scaling, Responsive Layout, or Liquid Layout options above.