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

[Sascha]

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

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 */
}




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

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 */
}
}




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).

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)';
}
});




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;
}
}




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); }
}




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();
});




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~

Источник:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.