Any suggestion for serving pages both for desktop and mobile web pages?

[pannz]

Recently I'm thinking a desktop and mobile web routing problem.
At beginning, I build a Web App only consider for desktop web browser. And later, I'm thinking if the desktop version could also well-fit the access from mobile web. Actually, it can work, but it looks like a bit heavy when accessing from mobile web browsers.
Considering mobile web use case, actually, what I want is a lite, simplified version which compare to desktop version. For example, on the desktop version, we will have a full featured, complex application witch the UX is more designed for desktop, and in mobile web case, the corresponding components' functionality might much more simpler and the UX also has big different design for mobile screen.
So, using CSS Media query or use JS to dynamic rendering according to the screen width (or browser UA) in same component seems not a good idea in this case.
To handle this problem, another normal practice is dividing the two use cases into two different Application and when accessing the mobile web version, the base pathname can additionally add /m (means a mobile web prefix) in front of all routes.

But I'm also wondering if there's another way (or can be implemented) in svelte which we can define the route +page.m.svelte, +layout.m.svelte (similar to +page.svelte, +layout.svelte, but used for mobile web). When server receive requests from user and use UA to render the right file?

Not sure this is possible or not? Thanks!