This article explains why the traditional 100vh unit fails on mobile browsers, introduces the three new CSS viewport unit families (large, small, and dynamic), and provides practical code examples and guidance for choosing the right unit in responsive web designs.
This article analyzes the limitations of native navigation bars on mobile pages, proposes a reusable H5 navigation‑bar component (@pango/navigation-bar) with performance, cost, and user‑experience benefits, details its architecture, configuration, code usage, exception handling, and adaptation for foldable screens, and outlines the open‑source plan.
This article explores the evolution, core principles, and practical solutions for remote debugging of mobile web pages, covering protocols, transport channels, toolchains, and future directions to help front‑end engineers efficiently troubleshoot white‑screen issues on phones.
This article explores the evolution, core principles, and practical techniques of remote debugging for mobile web pages, covering USB and Wi‑Fi transport, protocol details, tool comparisons, and best‑practice recommendations for developers working on hybrid and native‑web applications.
Lazada's H5 container team tackled severe first‑screen delays on high‑traffic sales events by building a monitoring system, introducing pre‑heat and pre‑render techniques, and adopting server‑side rendering, ultimately cutting load times by up to 50% and dramatically improving user conversion across Southeast Asia.
The article outlines how Baidu iFanFan reduces mobile web page load times from 2‑3 seconds to under one second by bundling static resources, pre‑rendering and pre‑initializing WebViews, employing a micro‑frontend master‑slave architecture, using offline packages, native request routing, and early network pre‑loading.
This article presents a custom canvas‑based mobile screenshot solution for single‑page applications that overcomes cross‑origin image blocking, low scaling clarity, inaccurate arc rendering, and deep DOM parsing issues by loading images anonymously, rendering at higher resolution, using precise arc patterns, and measuring text for proper wrapping.
This article explains how to add dark mode support to H5 pages by using JavaScript to toggle CSS classes and CSS media queries, discusses system compatibility across platforms, provides practical code examples, and outlines additional media features for broader UI adaptations.
This article explains the importance of ARIA and semantic HTML for creating accessible mobile web experiences, detailing browser support, key ARIA attributes, best practices for images, videos, colors, navigation, and handling differences between Android and iOS screen readers to improve usability for visually impaired users.
This comprehensive guide explains the viewport concept, browser behavior, DOM APIs, and practical usage of the Viewport Meta Tag—including width, scale, user‑scalable, and viewport‑fit—while comparing responsive and adaptive design patterns and offering concrete code examples for mobile cross‑screen adaptation.
This article explains why scroll‑penetration occurs when a modal mask covers the page, why simple overflow:hidden or event‑bubbling tricks fail, and provides a complete solution using passive event listeners, selective default‑preventing, multi‑layer handling, and a ready‑to‑use React component.
This article introduces the Web Share API, explaining its purpose, syntax, usage examples, browser compatibility, and best practices for integrating native sharing functionality into mobile web pages; it also covers required HTTPS conditions, user‑gesture triggers, and provides sample ES6 code snippets for developers.
The article explains H5 front‑end performance bottlenecks—white‑screen delays and interaction lag—by detailing the page loading stages, showing how to measure first‑paint and load times with Chrome DevTools and device debugging, and recommending solutions such as server‑side rendering, touch‑area optimization, script debugging and memory‑leak prevention to improve first‑screen speed and overall smoothness.
This article explains how to transform JDreact mobile code into standard H5 pages, covering configuration changes, backend API adaptation, external CSS integration, platform‑specific ref handling, input focus problems, number‑field behavior, radio‑group styling, data passing techniques, AsyncStorage usage, and boolean value conversion.
This article examines the rapid rise of WeChat mini programs and fast apps, their market impact, technical architecture, development workflow, key frameworks such as WePY and mpVue, code examples, and the opportunities and challenges they present for front‑end developers on mobile platforms.
JSSDK is a JavaScript SDK that enables H5 developers to quickly integrate JD app features such as sharing, deep linking, and native function calls across platforms, offering modular, version‑compatible, and type‑safe APIs to streamline mobile web development.
The author, a senior front‑end engineer, shares insights from ArchSummit 2017 Beijing, covering Google's presentation on Mobile Web and Progressive Web Apps in China, Baidu's discussion on front‑end techniques that propel product development, and the evolving landscape of web versus native applications.
This article reflects on a frontend developer’s three‑year journey, outlining core technical skills, deep‑dive modularization concepts for code and platforms, practical best‑practice guidelines, and insights into wireless/mobile web development for sustainable growth.
This article presents a comprehensive, up‑to‑date guide for invoking native apps from H5 pages on platforms such as WeChat, QQ, Weibo and Safari, covering universal links, scheme URLs, fallback strategies, platform‑specific quirks, testing tips, and a ready‑to‑use JavaScript implementation.
This article recounts the JD PLUS membership mobile redesign, detailing tight deadlines, complex business logic, front‑end/back‑end separation, Vue.js challenges, UIWebView performance bottlenecks, cross‑origin handling, Flexbox compatibility, ES6 polyfills, array reactivity, WebView caching, and Swiper integration, and how each issue was resolved.
This article explores why embedded H5 pages in mobile apps suffer long white‑screen delays and presents a comprehensive set of front‑end and client‑side optimizations—including request reduction, caching strategies, offline packages, pre‑loading webviews, and fallback mechanisms—to achieve near‑native startup performance.
This article explains what Progressive Web Apps are, compares them with native apps, discusses mobile web usage trends in China, describes key PWA features, outlines testing tools like Lighthouse, and examines performance metrics that focus on user perception rather than traditional load events.
This article explains why touch event handlers can degrade mobile scrolling, how Chrome's passive listener option improves performance by default, the implementation details, common pitfalls, and practical fixes using CSS touch-action and proper event handling.
Mobile pages load about 40% slower than PC pages, users abandon sites after three seconds, and this article offers practical frontend techniques—reducing HTTP requests, compressing assets, leveraging caching, and adopting HTTP/2—to dramatically improve mobile web performance.
This guide explains how to display a mobile web game exclusively in landscape orientation by rotating a container div with CSS transforms and JavaScript, avoiding intrusive prompts and handling devices with auto‑rotate enabled.
This article details the motivation, core requirements, competitor analysis, design choices, and performance optimizations behind Qreact—a lightweight, drop‑in replacement for React aimed at reducing bundle size and improving runtime efficiency for mobile web applications.
The talk by Alibaba senior tech expert Shuwen Li reveals how the 2016 Double‑11 front‑end team achieved 100% service capability, second‑level instant experience, VR/3D interaction, visual monitoring, and accessibility through innovations like Wormhole SSR, Weex, HTTP/2, HTTPDNS, and automated pre‑loading, delivering sub‑second page loads and high reliability.
Accelerated Mobile Pages (AMP) is Google’s open‑source framework that enforces HTML restrictions, uses custom amp‑ components and a priority‑based JavaScript engine, caches validated pages, and applies strict loading, CSS, and animation rules to dramatically speed up static mobile content, improving SEO and user experience despite some development overhead.
This article details how Alibaba's mobile Taobao app tackled severe H5 performance problems in 2015 by introducing the 521 rule, extensive system analysis, and a series of front‑end, network, and native optimizations—including HTTPDNS, SPDY, image compression, and pre‑loading—that collectively reduced load times dramatically and boosted user metrics.
An in‑depth look at four popular mobile web frameworks—jQTouch, jQuery Mobile, Sencha Touch, and Titanium Mobile—examining their ease of use, performance, licensing, and development trade‑offs, and concluding which approach best balances native‑like experience with web‑based flexibility.
With mobile device usage surpassing PC, the article explains why HTML5‑based H5 pages are essential for modern media, compares them to native apps, outlines their technical advantages, and showcases a 3D rotating schedule interface created for the 2014 World Cup as a successful case study.
The article traces HTML5’s evolution from its 1999 HTML4 roots through the 2007 WHATWG revival and 2014 W3C recommendation, highlighting how Apple, Google, and early hybrid frameworks spurred mobile adoption despite initial hardware API limits, ultimately enabling richer “Super App + WebApp” experiences as browsers and devices improved.
Understanding mobile web app adaptive design requires grasping PPI/DPI concepts, the variable meaning of CSS pixels, and using viewport meta tags—especially target-densitydpi and initial-scale—to achieve 1:1 rendering across Android density buckets and iOS Retina screens while balancing layout and asset sizing.
