How can I detect if a browser is mobile and switch between normal and mobile?

Question

I assume it involves the view-port somehow, but I'm not good at mobile. I'd like to re-size my font and move my elements around.

I see that HTML 5 Boilerplate comes in a mobile form, how and when would I switch to that?

Answer 1

You may parse the user agent to determine the mobile platform (e.g., iPhone, iPad, iPod, Android, Opera, Android, BlackBerry, hpwOS, Windows PhoneOS, etc.).

And it is better to use a @media query in CSS to take advantage of the screen dimensions.

For reference:

• https://mislav.net/2010/04/targeted-css/
• https://www.w3schools.com/css/css3_mediaqueries.asp

Answer 2

It depends on what you need to change.

To change Boilerplate to Boilerplate Mobile you could have a server-side condition and render a completely different page. If you are using some kind of dynamic framework or have direct access to the server you can check for User-Agent

Here is an article that explains how to use mobile-specific JS, CSS and HTML. Hope it helps.