DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Web Adaptation One More Development Practices

👇🏻Here is a super practical "HarmonyOS Web Multi-Device Adaptation Development Guide"! Many developers often overlook the hidden official HarmonyOS case studies. Today, I'll share my real project experience to help you master them—no theory overload, just pure hands-on tips!

🌟 Opening: Why does your page always get complaints?

"This button is too big on the phone, but too small on the tablet!" Sound familiar? Don't worry! HarmonyOS's web adaptation solution can make your page smartly adapt like a Transformer. Today, I'll teach you hands-on how to nail multi-end adaptation with three magic tools!

🔧 Core Toolkit: The Three Essentials for Adaptation

1️⃣ Relative Units: Make Elements Breathe 

/* Stop sticking to px! */
.container {
  width: 90%;  /* 90% of parent container */
  padding: 2rem; /* Dynamically calculated based on root font size */
  margin: 0.5em; /* Scales with current font size */
}

/* Fullscreen magic */
.modal {
  width: 100vw;  /* Viewport width */
  height: 100vh; /* Viewport height */
}
Enter fullscreen mode Exit fullscreen mode

Practical Scenario: When you unfold a foldable device, a welcome page background written with vw/vh units will automatically stretch—smooth as a pancake!

2️⃣ Media Queries: Device Size Costume Change 

/* Mobile portrait mode */
@media (orientation: portrait) and (max-width: 599px) {
  .sidebar {
    display: none;  /* Hide sidebar on small screens */
  }
}

/* Tablet landscape Easter egg */
@media (orientation: landscape) and (min-width: 600px) {
  .secret-feature {
    display: block; /* Unlock hidden feature on large screens */
  }
}
Enter fullscreen mode Exit fullscreen mode

Pitfall Alert: HarmonyOS's aspect ratio logic is opposite to the web standard! Remember to write aspect-ratio as height/width (e.g., for mobile portrait 9:16, write 16/9).

3️⃣ Window Listener: JS Dynamic Transformation 

// Capture window changes in real time
window.addEventListener('resize', () => {
  const isMobile = window.innerWidth < 600;

  // Dynamically switch layout
  document.body.classList.toggle('mobile-mode', isMobile);

  // Adjust layout like building blocks
  if(isMobile) {
    gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
  } else {
    gridContainer.style.gridTemplateColumns = 'repeat(4, 1fr)'; 
  }
});
Enter fullscreen mode Exit fullscreen mode

Performance Tip: Remember to use a debounce function to avoid frequent reflows!

🎯 Real-World Case Library: Ready-to-Use

Case 1: Smart Grid Layout 

/* Mobile: 2-column compact layout */
.grid-container {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Tablet: 4-column elegant display */
@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* Foldable expanded: 6-column cinema mode */
@media (min-width: 840px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
}
Enter fullscreen mode Exit fullscreen mode

Visual Magic: Use object-fit: cover to keep images proportional in different grid sizes!

Case 2: Morphing Dialog 

.custom-dialog {
  /* Base mobile size */
  width: 300px;
  height: 200px;
}

/* Tablet adaptation */
@media (min-width: 600px) {
  .custom-dialog {
    width: 400px;
    height: 300px;
    /* Center scale-up animation */
    animation: scaleUp 0.3s ease;
  }
}

@keyframes scaleUp {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}
Enter fullscreen mode Exit fullscreen mode

Interaction Detail: On large screens, add backdrop-filter: blur(5px) to dialogs for a premium look!

Case 3: Adaptive Carousel 

// Dynamically calculate visible slides
function calculateSlidesPerView() {
  const containerWidth = document.querySelector('.carousel').offsetWidth;

  if(containerWidth > 1024) return 4;
  if(containerWidth > 768) return 3;
  return 2;
}

// Auto-update on device switch
window.addEventListener('resize', () => {
  swiper.params.slidesPerView = calculateSlidesPerView();
  swiper.update();
});
Enter fullscreen mode Exit fullscreen mode

Smooth Secret: Combine with CSS Scroll Snap for silky smooth scrolling—no more stutter!

🚀 Debugging: Visibly Effective Adaptation

  1. Chrome Magic:
    • Device emulator: one-click switch between phone/tablet/foldable
    • Shortcut Ctrl+Shift+M for quick responsive mode
  2. Real Device Testing:
    • Use Huawei DevEco Studio's real-time preview
    • Multi-device sync debugging: view layouts on phone and tablet simultaneously

💡 Conclusion

Feeling inspired after these cases? Open DevEco Studio and try creating a new project! If you encounter interesting adaptation issues in real development, join the developer community and battle it out with me~

Easter Egg Tip: Search "Adaptive Layout Case Collection" in the HarmonyOS docs for more surprise templates! See you next time~ ✨

Top comments (0)