#Product 01-08 Adjusting the Mobile Layout — Portrait and Landscape Views

For Clock App Lab #001, I need to adjust the layout for real smartphone use as a PWA. Even if the clock looks good on a desktop browser, it may not fit well on a phone. The height can feel too tight, or the landscape view may not feel enough like a real desk clock. In this note, I focus on 100vh vs 100dvh, switching layouts between portrait and landscape, and keeping the clock UI visible without unnecessary scrolling.

In this eighth note for Clock App Lab #001, I want to organize the layout adjustments for portrait and landscape views on smartphones.

At this point, the Retro Desk Clock PWA is starting to take shape. I have worked on the red retro body, the cream front panel, the two-panel time display, light mode and dark mode, the flip animation, the basic PWA file structure, the home screen installation flow, and the first checklist for testing on Android and iPhone.

But when thinking about actually using this as a PWA, the next important issue is how the clock fits on a smartphone screen.

A design that looks good in a desktop browser does not automatically feel good on a phone. This is especially true for a clock app. A normal web page can be read by scrolling. A clock app should not feel like that. When it opens, the time should be visible immediately. The user should be able to place the phone on a desk and leave it there.

So smartphone support is not just about making the layout “responsive.”

For a clock app, portrait and landscape have different roles.

Portrait mode is probably how many users first open the app. They tap the home screen icon, hold the phone normally, and see the clock in a narrow vertical screen. In this view, the clock body should not become too small, but it also should not overflow. The digits, the light and dark mode dots, the logo, and the surrounding space all need to fit naturally inside the narrow screen.

Landscape mode is different. This is the view for placing the phone horizontally on a desk. Since the clock design itself is based on a wide retro desk clock, landscape mode may actually be the more important mode for this product. If the red body, large time panels, and small controls look right in landscape, the PWA starts to feel closer to a real desk clock.

The goal is to make both uses feel natural.

The first thing to check is height.

In older web layouts, 100vh is often used when we want an element to fill the full screen height. It is useful, but on mobile browsers it can behave awkwardly because the browser address bar and bottom UI can appear or disappear. This can make the layout feel slightly unstable.

For this kind of app, 100dvh can be a better choice. The dvh unit uses the dynamic viewport height, which can better match the currently visible screen area on mobile devices. For a clock UI that should fit inside one screen, this difference can matter a lot.

However, simply changing everything to 100dvh is not enough. The clock body width, top and bottom spacing, landscape height, and scaling on smaller devices also need to be considered together.

For this reference implementation, I want to create a small demo that switches between portrait and landscape layouts and checks how the clock card fits.

The main thing I want to check in this implementation is whether the clock sits naturally inside the screen.

In portrait mode, the clock needs to become more compact. If the wide desk clock body is displayed too large, it becomes too tight on a narrow phone screen. So the clock width should adapt to the screen width, and the number panels may need to become slightly smaller. At the same time, the digits should remain readable because the time display is the most important part of the app.

In landscape mode, the clock can become larger. There is more horizontal space, so the wide retro clock shape can be used more effectively. In this view, extra explanation or card-like elements should become less important. The clock itself should be the main focus.

Scrolling is also important.

For a blog or normal web page, vertical scrolling is expected. But for a PWA clock launched from the home screen, scrolling feels strange. A clock should fit into one clear view. If the user needs to adjust the screen after opening it, the app feels unfinished.

So the app screen should avoid unnecessary scrolling as much as possible. On very small devices, it may not be possible to avoid scrolling completely, but at least the clock body and time display should appear inside the first visible area.

Another thing to consider is the safe area.

On iPhones and other devices, there may be a notch at the top or a home indicator at the bottom. When a PWA opens in a more app-like view, UI elements should not sit too close to these areas. Giving the clock enough breathing room makes it easier to handle differences between devices.

For this clock, a little space around the object actually feels right. It is a retro desk clock, so it should not be pressed tightly against the edges of the screen. It should feel like a small object placed on a desk.

Light mode and dark mode also change how the spacing feels.

In light mode, the clock feels like it is sitting in a bright room. In dark mode, the surrounding area becomes darker and the display panels feel warmer, almost like a small backlight. In landscape mode, dark mode may make the phone feel especially close to a real bedside or desk clock.

This is something that needs to be checked on a real device.

A desktop preview cannot fully show the distance between the user and the phone when it is placed on a desk. A clock held in the hand and a clock placed on a table require slightly different size decisions. That is why portrait and landscape layout adjustments should be made with real usage in mind, not only with browser preview.

The important point is not only to adapt to screen size. The important point is to adapt to the usage scene.

Portrait mode should feel like a clock that is easy to check while holding the phone. Landscape mode should feel like a clock that can stay on a desk.

By changing the layout slightly between these two states, the PWA starts to feel more complete.

Clock App Lab #001 is not moving in the direction of adding many features. Instead, it is about carefully refining a small clock. This layout adjustment is part of that process. It is not a big new function, but it is important for making the app feel usable.

In the final version, I want the user to open the clock from the home screen and use it comfortably in both portrait and landscape. Especially in landscape mode, when the phone is placed on a desk, the app should feel less like a web page and more like a small clock.

The next topic will be the home screen icon. A PWA experience does not begin only when the app opens. It begins from the small icon on the phone’s home screen. I want to think about an icon that is simple, recognizable as a clock, and still connected to the Clock App Lab identity.