Three Ways to Serve PC and Mobile from a Single URL
A single-URL strategy consolidates SEO authority, eliminates broken shared links between devices, and cuts maintenance costs by keeping one codebase. The layered approach—server routing, framework context, and CSS media queries—covers the real-world edge case where a desktop user resizes their browser to a narrow window, which pure UA detection misses entirely.
Serving PC and mobile from one URL avoids SEO fragmentation, broken shared links, and the overhead of maintaining two separate codebases. The core pattern is straightforward: detect the device, then conditionally render the right UI. Three distinct strategies make this work, each with different trade-offs in complexity, user experience, and responsiveness.
The simplest approach parses the User-Agent string and redirects mobile users to a separate page. A more integrated method uses framework-level Context or Inject APIs in React or Vue to pass device type down to components, which then conditionally render without any page jump. The most flexible strategy ignores device type entirely and uses responsive hooks or CSS media queries to adapt layouts based on screen width, handling edge cases like a resized desktop browser window.
A production setup often layers all three: Nginx performs a fast server-side UA check to route traffic, the frontend framework handles component-level conditional rendering, and media queries provide final layout fine-tuning. The article includes complete code examples for each approach, from a simple UA detector to a full e-commerce site with React layouts that switch between a mobile bottom-tab navigation and a desktop sidebar with a three-column product grid.
The article's three-layer model—server routing, framework state, CSS queries—maps cleanly onto the actual failure modes of single-URL adaptation. Each layer catches what the previous one misses.
UA detection's biggest blind spot isn't spoofed headers; it's the common user behavior of resizing a desktop browser window. The combined strategy treats UA as a fast initial guess and screen width as the final authority.
The recommendation to use Context/Inject over per-component isMobile() calls is as much about testability as performance. Mocking a device type in a single provider is far simpler than mocking navigator.userAgent across dozens of unit tests.
Many teams over-invest in responsive CSS while neglecting server-side routing, but for SEO-heavy pages, the Nginx layer is the only one that guarantees crawlers see the right markup on first request.