• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / WordPress / Child Themes / Preparing Genesis Sites for the iPhone X

Preparing Genesis Sites for the iPhone X

By Victor M. Font Jr.
September 23, 2017Leave a Comment

iPhone X Notch - public domain image from pixabay.com

As the world eagerly awaits the release of Apple's new flagship iPhone X, developers are anxious that their mobile sites will look good on the device because of the notch. The phone's super-retina OLED screen covers the entire face of the phone, except for the "notch" where the camera and other various components are situated. This results is some awkward situations for screen design, like constraining websites to a "safe area" and having white bars on the edges.

viewport-fit

Apple took this concern into account when they released iOS 11. The WebKit team at Apple gave us a way to control this behavior via the viewport meta tag and by implementing CSS constants that are set by the system and cannot be overridden. The viewport option we’ll be looking at is viewport-fit and its three possible values:

  • contain: The viewport should fully contain the web content. This means position fixed elements will be contained within the safe area on iOS 11.
  • cover: The web content should fully cover the viewport. This means position fixed elements will be fixed to the viewport, even if that means they will be obscured by the notch. This is the same behavior we had on iOS 10.
  • auto: The default value, the same as contain.

To restore your header bar to the very top of the screen, behind the status bar like it was in iOS 10, you’ll want to add viewport-fit=cover to your viewport meta tag. With the Genesis Framework, this is simple. There's already a filter for changing the output of the viewport meta tag. Add this code to functions.php:

The CSS Constants

You're probably familiar with CSS variables, but CSS constants? CSS constants can be accessed by the constant() function in CSS, which has been proposed to the CSS Working Group for standardization. Four layout guide constants have been implemented in Safari for iOS 11 to add safe areas for the notch.

The 4 layout guide constants are:

  • constant(safe-area-inset-top): The safe area inset amount (in CSS pixels) from the top of the viewport.
  • constant(safe-area-inset-bottom): The safe area inset amount (in CSS pixels) from the bottom of the viewport.
  • constant(safe-area-inset-left): The safe area inset amount (in CSS pixels) from the left of the viewport.
  • constant(safe-area-inset-right): The safe area inset amount (in CSS pixels) from the right of the viewport.

These CSS constants can be added to margin, padding, or absolute position values such as top or left. In most cases, when you are using viewport-fit=cover, to achieve the desired results you can just add the following to the body tag in your child theme's style.css:

Apple’s final gift to us is that these constants have also been backported to UIWebView.

  • 37shares
  • Facebook33
  • Twitter2
  • Pinterest0
  • LinkedIn1
  • Print
  • SMS1

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page