Small screens

The viewer adapts to its own width, not the window’s. On a phone, or in a narrow column of a wide screen, it gets a phone’s layout: panels and menus slide up from the bottom, and buttons that don’t fit move into the “More” menu. You don’t set anything for this.

To change what happens at a size, use the second argument of the layout function:

{
  layout: (layout, env) =>
    env.size === 'compact' ? layout.place('main', 'bottom') : layout,
}

On a phone, the main toolbar now sits at the bottom, under the thumb. The function runs again whenever the size changes, so turning the phone or resizing the window switches layouts as it happens.

Here the viewer sits in a box as wide as a phone, with that layout function, so it has a phone’s layout on any screen:

<link rel="stylesheet" href="./phone.css" />

<div class="phone">
  <embedpdf-viewer id="viewer" style="height: 100%"></embedpdf-viewer>
</div>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@embedpdf/viewer@3/dist/embedpdf.js';

  const welcome = '/pdfs/welcome.pdf';

  document.getElementById('viewer').config = {
    src: welcome,
    layout: (layout, env) => (env.size === 'compact' ? layout.place('main', 'bottom') : layout),
  };
</script>

Try it: open the search from the bar at the bottom: it slides up as a sheet. Search for “PDF” and pick a match: the sheet closes on its page. The mode tabs that don’t fit are behind the chevron next to View.

The three sizes#

At every size, a toolbar keeps what fits and moves the rest into its “More” menu, least important first (see Layout).

One size at every width#

The viewer picks its size from its width. size picks one for every width instead, as for a kiosk on a big screen that should work like a phone:

{
  size: 'compact',
}

'auto' (the default) measures. With a size set, env.size is that size, and env.width is still the viewer’s own width. It’s read once, when the viewer starts.

What env tells you#

Sheets#

A panel or a menu on a phone is a sheet: it slides up from the bottom of the viewer, over the pages, with a handle at the top.

• Drag the handle to make it taller or shorter, or down to close it.
• A tap on the pages above it closes it.
• A sheet that holds a list, such as the thumbnails or the search results, closes when you pick something, so you see where it took you.

To make a panel a sheet at other sizes too, or never, set its present. With layout.panels({ present: { compact: 'overlay' } }) no panel is a sheet on a phone: each one opens over the pages instead. See Panels. On a wider viewer, a sheet is as wide as its panel, centered.

Touch#

When env.touch is true, every button and menu row is at least 44 px tall, the size a fingertip hits, the rows of a panel show their menu button without a hover, and the viewer’s own fields write in 16 px text. It’s true when the main way of pointing is a finger. touch sets it instead: true for every pointer, as on a touchscreen kiosk with a mouse plugged in, and false for none:

{
  touch: true,
}

'auto' (the default) asks the browser. It’s read once, when the viewer starts.

Touch gestures work wherever a finger touches the pages, whatever touch says: pinch to zoom, a long press to select a word, the handles to stretch the selection.

The notch and the home bar#

When the viewer reaches the edge of the screen, as it does in full screen or as the whole page of a phone app, its bars and sheets keep clear of the notch, the rounded corners and the home bar.

Good to know#

Why the viewer’s width, not the window’s#

A viewer in a sidebar or a dashboard card is small even on a big screen, and the layout that works there is the phone’s. Measuring the viewer itself gives every embed the right layout without media queries.

Change the sizes#

To switch at other widths, decide on env.width yourself:

{
  layout: (layout, env) =>
    env.width < 720 ? layout.place('main', 'bottom') : layout,
}