#Multi-device Adaptation

Tuya miniapps run on a variety of devices and operating systems with different screen sizes and system characteristics. Proper multi-device adaptation ensures the miniapp displays well on all devices.

#Notch Screen Adaptation

iPhone X and later models, along with some Android phones, feature notch designs where the top status bar area is obscured. Without adaptation, page content may be hidden behind the notch or overlap with the status bar.

#Safe Area

The safe area refers to the usable display region on screen that is not obstructed by notches, rounded corners, sensors, or other elements.

┌──────────────────────┐
│      Status bar      │ ← Non-safe area (top)
├──────────────────────┤
│                      │
│                      │
│      Safe area       │ ← Content should be within this area
│                      │
│                      │
├──────────────────────┤
│    Home Indicator    │ ← Non-safe area (bottom)
└──────────────────────┘

#Using CSS Environment Variables

Use the env() function to get safe area insets:

/* Bottom fixed button adaptation */
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
}

/* Top area adaptation */
.custom-header {
  padding-top: env(safe-area-inset-top);
}

#CSS Safe Area Variables

#Bottom Safe Area Adaptation

On iPhone X and later models, there is a Home Indicator at the bottom. If the page has buttons or action bars at the bottom, add extra bottom padding to prevent them from being obscured.

#Common Scenarios

/* Bottom TabBar adaptation */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  border-top: 1px solid #eee;
}

/* Bottom action bar adaptation */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

#Adaptive Units

Miniapps provide multiple size units. Choosing the right unit ensures pages adapt across different screens.

#rpx

rpx is the responsive pixel unit provided by the miniapp platform. It automatically converts based on screen width, with the screen width defined as 750rpx.

/* Adaptive layout using rpx */
.card {
  width: 710rpx;  /* leave 20rpx margin on each side */
  margin: 0 20rpx;
  padding: 24rpx;
  border-radius: 16rpx;
}

#rem

rem is calculated based on the physical device width and is not affected by screen rotation.

#Usage Guidelines

/* Recommended practice */
.title {
  font-size: 32rpx;    /* use rpx for text */
  line-height: 44rpx;
}

.divider {
  height: 1px;         /* use px for thin lines */
  background: #eee;
}

.container {
  padding: 24rpx;      /* use rpx for spacing */
  width: 100%;
}