Is there a way to detect if a user is on a mobile device, and if so it redirects them to another mobile-friendly page?
Replit URL: https://website.ccseamlessguttering.repl.co/
Custom URL: https://ccseamlessguttering.online
Thank you!
You can do this by making your CSS and JS account for smaller screens.
I don’t think you should use a separate page for mobile users. Instead, just use @media to make one page work for all devices.
Also next time, please post the link to your Repl’s cover page. In this case, it’s https://replit.com/@ccseamlessguttering/website. Also see this guide on how to share your code:
3 Likes
Use relative units, e.g. em instead of px.
Move the meta tags to be before the <body>, otherwise they don’t work and the page still looks messed up on mobile devices.
I see you’re using center elements, which are deprecated because you’re meant to use CSS to specify page layout, not HTML. If you use HTML elements to specify layout, you’ll have to do a lot of changes just for something simple, and as you develop the website, code becomes cluttered. Instead do use div elements, and CSS:
div {
text-align: center
}
4 Likes
There are some packages such as bootstrap that make it easily possible for a site to handle any sized screen or device. I would try using that for an advanced project. Plus, it makes css somewhat easier.
2 Likes
Use this media query tutorial Media Query for Mobile – How to Use Responsive Media Queries for All Devices
3 Likes
You can combine different methods that the others have mentioned:
((/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || navigator.maxTouchPoints || ("ontouchstart" in document.documentElement) || (screen.orientation !== null) || matchMedia("(pointer:coarse)")) && matchMedia("only screen and (max-width 768px)")) ?
window.location.href = "/mobile.html" :
window.location.href = "/desktop.html";
1 Like
I wouldn’t use things like ontouchstart, there are now more and more touchscreen laptops which also have these properties in the window object.
1 Like
Ok, thank you for your help, but how do I use @media?
You can use @media to check for the screen width with something like this:
@media only screen and (max-width: 768px) {
/* your CSS for mobile */
}
2 Likes
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.