How to make UIs that is different on mobile and desktop
Answered
Rhinelander posted this in #help-forum
RhinelanderOP
Trying to make UIs that drastically differ on mobile and desktop. How might I do that? Should I use "react-responsive" and check isMobile? and if it is not mobile i display desktop and add suspense around each?
Answered by B33fb0n3
if there are just some small changes, you can use tailwind or css media queries or stuff similar to this.
When there are full completly designs, I like to build two pages and then render each one depending on wether its mobile or desktop. That works perfectly ^^
When there are full completly designs, I like to build two pages and then render each one depending on wether its mobile or desktop. That works perfectly ^^
4 Replies
@Rhinelander Trying to make UIs that drastically differ on mobile and desktop. How might I do that? Should I use "react-responsive" and check isMobile? and if it is not mobile i display desktop and add suspense around each?
if there are just some small changes, you can use tailwind or css media queries or stuff similar to this.
When there are full completly designs, I like to build two pages and then render each one depending on wether its mobile or desktop. That works perfectly ^^
When there are full completly designs, I like to build two pages and then render each one depending on wether its mobile or desktop. That works perfectly ^^
Answer
@B33fb0n3 if there are just some small changes, you can use tailwind or css media queries or stuff similar to this.
When there are full completly designs, I like to build two pages and then render each one depending on wether its mobile or desktop. That works perfectly ^^
RhinelanderOP
What do you use to check if it is mobile witouth flickering
@Rhinelander What do you use to check if it is mobile witouth flickering
I like to use
ua-parser-js. And then just enter the user agent and redirect if needed:const ua = (await headers()).get('user-agent');
const device = new UAParser(ua || '').getDevice();
if (device.type !== 'mobile')
redirect(`/somewhere`);