Browse Prior Art Database

Method for Fullscreen Web Content on Mobile Devices

IP.com Disclosure Number: IPCOM000235716D
Publication Date: 2014-Mar-24
Document File: 4 page(s) / 104K

Publishing Venue

The IP.com Prior Art Database

Abstract

Disclosed is a method to enable fullscreen web content on mobile devices. The method utilizes a gesture to hide and reveal the toolbar and make the content fullscreen, regardless of whether the content can scroll.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 38% of the total text.

Page 01 of 4

Method for Fullscreen Web Content on Mobile Devices

Definitions:


Scroll downward - scrolls the content upward. A gesture where the user's finger

moves upward vertically on the screen. This gesture eventually moves the user's view to the bottom of the web page, for example.

Scroll upward - scrolls the content downward. A gesture where the user's finger

moves downward vertically on the screen. This gesture eventually moves the user's view to the top of the web page, for example.

Content can be scrolled - if the height of the content is larger than the height given to the content area. For example, typically, a scrollable container does not scroll if

just a button is located on the page because the height of the content area is most likely much larger than the height of the content: the button.

Fling gesture - a gesture where the user presses down on the screen with a finger, then, in one smooth motion, drags the finger in any direction, and then lifts the finger off the screen

Fullscreen mode - when the toolbar is translated off-screen and the content stretches to fit the entire screen

Regular mode - when the toolbar is visible and the content starts below the toolbar

and stretches to the bottom of the screen

Responsive Design - approach aimed at crafting sites to provide an optimal viewing experience (i.e. easy reading and navigation with a minimum of resizing, panning, and scrolling) across a wide range of devices (from mobile phones to desktop computer monitors)

Mobile devices are manufactured with a wide array of sizes, ranging from small smart phones (approx. 3" screens) to large tablets (approx. 10" screens). The usable area on the screen differs across these devices. Typically, applications include toolbars or navigation bars on the top portion of the screen to display the title of the screen, provide actions, and provide a way to navigate to other parts of the application. These toolbars are relatively consistent in height across different screen sizes in the respective platforms. Due to this consistent height, the toolbar on a smart phone covers a larger percentage of screen real estate than it does on a tablet. The result is a smaller useable area for content beneath the toolbar on a smart phone compared to a tablet, even after taking into account the difference in physical screen size.

Figure 1: Difference in usable screen space between a smart phone (left) and a tablet (right)

1


Page 02 of 4

Because the content, as opposed to the toolbar, is the primary focus and concern of the user, many applications have tried to increase the amount of real estate for the content. This is done by hiding the toolbar and increasing the height of the content . However, the toolbar still needs to be accessible when the user needs it.

A method is needed to increase the real estate of content that can be scrolled . Ideally, the approach must work with either horizontal or vertical scrolling components.

One solution currently in use is to tr...