Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for watchOS, the wrist and the web for smaller screens
Mehdi M.
Mehdi M.

Posted on • Edited on

     

watchOS, the wrist and the web for smaller screens

I was recently wondering what the web capabilities of Apple watchOS are. Here are my observations while using a Watch Series 5 withwatchOS 6, both released in 2019:

  • There’s no browser app. The only ways to consume web content are by hitting a link from Mail or Messages, or by asking Siri to go to a URL. These actions open the WebKit view (Safari 13). Like on other Apple devices, Messages uses theOpen Graph spec to replace URL’s by more readable links.

Open Graph in action in Messages on watchOS.

  • Page loading duration ranges from a few seconds to more than a minute. It’s hard to predict why as it doesn’t seem linked to the JavaScript weight or to the amount of pictures.
  • Once loaded, it’s okay-ish to browse a document. It just works and supports a wide range of browsers features (including Grid Layout).
  • Voice control really helps to input text data, otherwise you’re left drawing letters one by one, which is the last resort fallback.

Drawing letters to write on watchOS

  • Holding an arm in front of the eyes and using the other one to browse the web prevents the overall experience to be enjoyable, reminding that watches are good for passive features, short actions and notifications.

And that’s exactly why the Apple Watch is a great device: most apps narrow their scope, putting emphasis on small interactions, and they do it well. Keeping these principles with the web, Apple is just redirecting users to devices where the experience is better (and where the battery lasts longer).

I think keeping the same focus is the way to go while supporting very small viewports on the web. Taking a developer personal website as example, you could limit what’s displayed on such a small screen to the minimal contact informations, a bit like a business card: the name, a small picture or logo and a few contact links (<a href="mailto:…">,<a href="tel:…">). If these informations are already part of your website footer, you’re probably only a few media queries away from a decent result.

When it comes to web development, watchOS requires you to be aware of some specificities, across these four topics: missing features, viewport size, forms and reader mode.

The only official piece of information about web content on watchOS, well hidden in the middle of nowhere, is aWWDC2018 video about preparing web content for watchOS 5 by Apple’s developerWenson Hsieh. Luckily it’s a great one!

We’ll go through the specific things and then see what it could mean to support smaller viewports in general. Spoiler alert: as often, betting on the fundamentals (semantic HTML, progressive enhancement) wins.

1. Disabled features

On watchOS, there’s no support for:

A great use case for Service Workers on a watch could be Push Notifications (they require a Service Worker), but they are currently only available in Chrome, so it’s no big deal for now to not have Service Workers on watchOS.

2. The<meta name="viewport">

Apple is helping CSS authors by:

  • setting on all Watch models the same viewport, 320*357, matching the width of the iPhone SE;
  • overridinginitial-scale to0.49;
  • forcingshrink-to-fit toyes (shrink-to-fit=yes) in order to avoid horizontal scrolling.

In other words: the layout of your website stays the same as on the smallest phones and fits the Watch screen without the need to unzoom.

shrink-to-fit applied to the viewport on watchOS

Flexibility is also given as these viewport adaptations can be disabled with (non-standard)<meta name="disabled-adaptations" content="watch">: the viewport then ranges from 272*340 (38 mm Watch) to 368*448 (44 mm) and isn’t automatically shrunk to the viewport anymore, opening the road to custom styles for viewports smaller than320px.

<meta name= combined with@media (min-width) on watchOS"/>

Thismeta is also important to fine-tune websites using responsive images:Eric Portis recommends to disable watchOS viewport adaptations because of the returnedDPR (device pixel ratio) being too high, resulting in wasted bandwidth (and thus battery consumption).

3. Forms

Accessibility

Filling a form opens a full screen panel, soarial-label is needed to provide label hints while filling a field.

Accessible form field on watchOS

Of course, don’t forget the<label> tag:

<labelfor="billing-email">    The email address where invoices will be sent<inputtype="email"id="billing-email"aria-label="Billing email"></label>
Enter fullscreen modeExit fullscreen mode

Fields

<select> and the following<input> types all comes with a dedicated keyboard layout:password,numeric,tel,date,time.

Tel, date and select fields on watchOS

4. Reading articles

Heavy text pages automatically enable the reader mode. Like every reader mode, it relies on proper HTML markup:article,figure,figcaption,blockquote

<figure><img src=
Picture description shown below the picture

Unexpectedly,microdata are used to introduce the article metadata in the reader mode. This is awesome!

Microdata used to introduce an article in the watchOS reader mode

Dealing with small viewports in general

A few months ago, I started to shape what supporting smaller viewports could be like. Aside from an Apple Watch, there are at leasttwo three other use cases for ~150 px wide viewports:

Usually I move a lot of CSS inside@media (min-width: 20em) (20em is generally320px). Some rules of thumb for smaller viewports:

  • every CSS rule changing an element position, size, flow or horizontal spacing should be in thismin-width media query;
  • same for decorative assets likebackground-image;
  • make surefont-size stays small;
  • avoid running JavaScript if your app can work without it.

We’re left with ausable HTML document with a basic sense of identity powered by some decoration rules (colours, opacity…).

Here’s a basic example where two elements in the header stack in one column when the viewport is too small, along withbackground-image removal.

Putting everything on a single column for viewports smaller than 320px wide

The only CSS changes consist of moving some CSS declarations into a@media rule:

html{font-size:50%;@media(min-width:20em){font-size:62.5%;}}.header{font-size:1.2rem;@media(min-width:20em){display:flex;justify-content:space-between;background:url('bg.png')no-repeatcenter/100%auto;}}
Enter fullscreen modeExit fullscreen mode

Did you know a desktop installed web app can be resized down to 207×117 on macOS? Here’sCan I Stop installed on macOS, with a viewport width below 320 px:

Can I Stop as an installed desktop app on macOS

And here isBurokku width a viewport of 371×1 (well, actually 0.77px according to Edge developer tools) on Windows 10 (video):

Burokku as an installed desktop app on Windows

Finally, big shoutout toApple’s developers videos website, which contains downloadable videos, high-definition slides (the pictures of this article are mostly from the slides), and a super cool transcription system with links to navigate the video. Worth trying and browsing!

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
meduzen profile image
Mehdi M.
Front-end developer, and beyond.
  • Location
    Belgium
  • Pronouns
    him
  • Work
    Full-stack janitor
  • Joined

Article updated with a small detail on the Windows 10 minimal viewport for a PWA.

CollapseExpand
 
meduzen profile image
Mehdi M.
Front-end developer, and beyond.
  • Location
    Belgium
  • Pronouns
    him
  • Work
    Full-stack janitor
  • Joined
• Edited on• Edited

Article updated to add a new use case for small viewport: Firefox can be resized as low as 63 px high on macOS.

CollapseExpand
 
johnnyxbell profile image
Johnny Bell
G’day mates, I’m Johnny 👋🏻Frontend Engineer, a11y advocate, & speaker.
  • Location
    Orange County, CA
  • Work
    Software Engineer at Weedmaos
  • Joined

Wow I’ve never thought about this. Great article!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Front-end developer, and beyond.
  • Location
    Belgium
  • Pronouns
    him
  • Work
    Full-stack janitor
  • Joined

More fromMehdi M.

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp