How Can We Achieve a Soft Fullscreen Experience on iOS 8 Without the `minimal-ui` Viewport Property?

iOS 8 Removes "minimal-ui" Viewport Property: Soft Fullscreen Workarounds

With the release of iOS 8 beta 4, the question arises: Can we still create a "soft fullscreen" user experience on iOS devices without the minimal-ui viewport property?

Concern: Address Bar Visibility

One of the challenges with fullscreen experiences involves hiding the address bar and navigation menu. Traditionally, a wrapper div filling the viewport and setting overflow to hidden or auto could address this. However, this method prohibits the browser from hiding those elements.

Revised Strategy

While the minimal-ui property is no longer supported, the concept remains. Users can still access it with a "touch-drag down" gesture. To manage this view state effectively and calculate the dimensions of the minimal-ui, third-party solutions like Brim - view manager for iOS 8 have emerged.

Brim's Implementation

Brim's implementation involves:

1. Creating an invisible "treadmill" element to ensure sufficient content for minimal-ui activation.
2. Using Scream to detect if the page is in minimal-ui mode.
3. Disabling document scrolling when in minimal-ui to prevent accidental exit.

Benefits of Brim

The result is a smooth transition into and out of the minimal-ui view, providing users with a fullscreen experience without compromising browser functionality and accessibility.

Additional Considerations

It's important to note that detecting device orientation using Scream is reliable only after the rotation animation has ended.

Conclusion

While the removal of the minimal-ui viewport property may seem like a setback, solutions like Brim offer alternative methods to achieve a "soft fullscreen" experience on iOS 8 devices, balancing the need for screen real estate with accessibility and user satisfaction.

The above is the detailed content of How Can We Achieve a Soft Fullscreen Experience on iOS 8 Without the `minimal-ui` Viewport Property?. For more information, please follow other related articles on the PHP Chinese website!