How change UI depending of user agent
Answered
California pilchard posted this in #help-forum
California pilchardOP
Okay there is my ui in desktop (see first image) and my ui in mobile (see second image). The problem is I wanna make appear the navbar (see mobile version) only in mobile browser. If we are in desktop with a small width, i dont wanna show the navbar but a burger menu (with element from sidebar). So how can I dont that in react ? Because tailwind only allow us to change ui with media query. Thx for ur help !
Answered by California pilchard
Well ur example use only media query. Ive made a custom context :
So I just have to get the actual device with :
And adapt the css with it
const getDevice = () => {
const userAgent = navigator.userAgent.toLowerCase();
const isMobile = /iphone|ipad|ipod|android|blackberry|windows phone/g.test(userAgent);
const isTablet = /(ipad|tablet|playbook|silk)|(android(?!.*mobile))/g.test(userAgent);
if (isMobile) {
return "mobile";
} else if (isTablet) {
return "tablet";
} else {
return "desktop";
}
}
const [device, setDevice] = useState<"mobile" | "tablet" | "desktop">(getDevice());
useEffect(() => {
const handleResize = () => {
setDevice(getDevice());
}
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);So I just have to get the actual device with :
const { device } = useUI();And adapt the css with it
13 Replies
Banjara Hound
So what's the problem that you don't want to use css? Because this can be done with media quires (and you know it)
California pilchardOP
because with media query the
navbar gonna appear even on desktop browser (with small width) which is something that I wanna avoid
Southeastern blueberry bee
@California pilchard you can check the device type using userAgent from header. You can do that
import { NextRequest, NextResponse, userAgent } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const { device } = userAgent(request)
const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrite(url)
}
```
import { NextRequest, NextResponse, userAgent } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const { device } = userAgent(request)
const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrite(url)
}
```
I would create two div
# desktop
<div class="hidden lg:block">
# elements for desktop
</div>
# mobile
<div className="lg:hidden">
# elements for mobile
</div>California pilchardOP
Well ur example use only media query. Ive made a custom context :
So I just have to get the actual device with :
And adapt the css with it
const getDevice = () => {
const userAgent = navigator.userAgent.toLowerCase();
const isMobile = /iphone|ipad|ipod|android|blackberry|windows phone/g.test(userAgent);
const isTablet = /(ipad|tablet|playbook|silk)|(android(?!.*mobile))/g.test(userAgent);
if (isMobile) {
return "mobile";
} else if (isTablet) {
return "tablet";
} else {
return "desktop";
}
}
const [device, setDevice] = useState<"mobile" | "tablet" | "desktop">(getDevice());
useEffect(() => {
const handleResize = () => {
setDevice(getDevice());
}
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);So I just have to get the actual device with :
const { device } = useUI();And adapt the css with it
Answer
Pygmy Nuthatch
Im pretty sure that relies on viewport width not user agent. So this is a very bad solution.
you see user agent in my example?
Banjara Hound
That is why display none exist
What i see and understand is that your problem can be solved easily with media queries
Southeastern blueberry bee
I think what he's trying to say is that media queries don't differentiate between device types. If you have a PC screen with a width that's almost the same as a mobile device, your media query will display the mobile view because it only relies on the screen size
Gharial
please is the conference running now?
California pilchardOP
exactly, and its working great !
Pygmy Nuthatch
No thats my point.