How detect smartphone screen and show webpage

Question

I'm creating a webpage and I want create a version for smartphones. I found information about this, but using a media-query with max-widht. The problem is when a user open the page in a smartphone with full HD screen, it's showing all content like in notebook with 15.6" How can i solve this?

Thanks

Answer 1

Take a look at HTML Responsive Web Design at w3schools: https://www.w3schools.com/html/html_responsive.asp

What you need is to make viewport responsive by adding meta viewport tag to your pages head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

I agree with @StaXter. But IF you can, I'd implement a feature both back end and front end solution. From what I've read online, the back end solution may fail sometimes, and as every web developer knows, JS sometimes fails too, for whatever reason although JS failing is becoming less common in my personal opinion.

But if you can't then there's 0 doubt, just use the solution that StaXter said. Only other thing I can add to that where you're just using the front end is to make sure you use meta tags: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

There are even meta tags for when someone has disabled JS, you can redirect them to a page where there's no JS.