Safe Areas

With the iPhone X release and further, Apple introduced so called safe areas, later implemented by Google Chrome with support in Android.

On devices with safe areas (like with top screen notch), app UI must include additional top/bottom spacing (to consider top notch and new bottom bar) in portrait orientation and additional left/right spacing (to consider left/right notch) in landscape orientation.

In portrait orientation Framework7 will do required styles modifications automatically, but in landscape orientation some additional classes must be added to elements:

The following elements don't require such classes:

Here is the example app layout with such classes:

<body>
  <!-- app root -->
  <div id="app">

    <!-- left panel doesn't require any additional classes -->
    <div class="panel panel-left panel-cover">
      ...
    </div>

    <!-- right panel doesn't require any additional classes -->
    <div class="panel panel-right panel-reveal">
      ...
    </div>

    <!-- main view, full-wide element, add "safe-areas" class -->
    <div class="view view-main view-init safe-areas" data-url="/">
      <div class="page">
        <div class="navbar">
          ...
        </div>
        <div class="page-content">
          <!-- full-wide list, will inherit safe-areas from view -->
          <div class="list">
            ...
          </div>
          <!-- full-wide content block, will inherit safe-areas from view -->
          <div class="block">
            ...
          </div>
          <!--
            two-columns blocks: need to
              - remove extra spacing on right side for left block
              - remove extra spacing on left side for right block
          -->
          <div class="row">
            <!-- remove right spacing on left block -->
            <div class="block col no-safe-area-right">
              ...
            </div>
            <!-- remove left spacing on right block -->
            <div class="block col no-safe-area-left">
              ...
            </div>
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
  ...
</body>