We have carried out display testing for iPhone X on the LIQUID PRESS series themes.
Applicable Themes
- LIQUID PRESS series (0.9.7.2)
iPhone X Compatibility Status
We have confirmed that LIQUID PRESS displays without any problems in Safari on iPhone X.
Landscape Mode
The iPhone X has a design in which the display is partially cut away at the camera area at the top (the notch), and
in landscape mode the specification is such that margins appear on the left and right of the web page.
Source: Apple Human Interface Guidelines iOS iPhone X
For this, iOS 11 also provides an option to remove the margins and display the page full screen.
The option is specified with the viewport tag and CSS.
How to Customize
Viewport Customization
With LIQUID PRESS, you can customize the viewport.
To remove the margins and display full screen, specify it as follows.
Dashboard > Appearance > Customize > Options > Viewport Customization
Example:<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Dropdown Menu
There is also an option to display the header menu as a dropdown on all devices. This allows a compact display even when there are many menu items.
Dashboard > Appearance > Customize > Options > Dropdown Menu
- Yes: dropdown display on all devices
- No: dropdown display on desktop and tablet (default)
Customization Examples
Before
After
Settings Screen
Other
For full screen display on iPhone X, you can also adjust the margins with CSS. Please see below for details.
- What web creators should know before the iPhone X release: what happens when a web page is displayed and how to resolve it (opens an external site)
- Settings manual: Custom CSS
Please Note
*If the setting item is not displayed, please check whether your theme has been updated.
*The screens above were verified on the iPhone X (Simulator) and are still under development. They may differ from the actual display.
*The full screen display option is a feature newly added in iOS 11. Problems may occur on older operating systems, so please verify before use.
*Please note that customization falls outside the scope of our setup support.
Public Development Status
LIQUID PRESS publishes the development status and change history of its templates on GitHub.
Please see below for details. To receive notifications about the development status, please click "Watch".
https://github.com/lqdjp/liquid-press/issues
LIQUID PRESS
» Unlimited Plan
» All Themes
