detecting mobile device and screen size

[ajetrumpet]

hey guys,

I'm going to write another site in PHP/MYSQL and I'm pretty sure people will be looking at it while on the go.  I searched for the topic here via this:  https://forums.phpfreaks.com/search/?q=detecting%20mobile%20device

Do any of you experts remember any of those threads?  At the moment I don't have time to search them by 1 at a time and scan the posts.  can anyone point me to some good online resources that can give me some insight on how professional developers write code to detect a mobile device’s page request, and then determine its screen size so the data can be displayed in a presentable manner?  I'm assuming it's out there.   thanks!

[requinix]

Current standards are to create responsive websites using CSS media queries. Don't detect the user agent, don't detect mobile or desktop. No Javascript. You should be able to open the site on your desktop browser, shrink the window, and see the mobile experience.

[ajetrumpet]

thank you very much, requinix!  I will look into this when I get back to it.  I got sidetracked, which is why I'm so late getting back to you about your response to me.  

[murphybeck]

Detecting mobile device using user agent isn't the best way to check if a user is using a mobile device since user agent strings can be spoofed easily.  There is a JavaScript API built-in for detecting media. The JavaScript window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. You can use this method to detect a mobile device based on the CSS media query.

 

<script>
$(document).ready(function(){
  let isMobileDevice = window.matchMedia("only screen and (max-width: 760px)").matches;
  if(isMobileDevice){
    // The viewport is less than 768 pixels wide
    //Conditional script here
  } else{
    //The viewport is greater than 700 pixels wide
    alert("This is not a mobile device.");
  }
});
</script>

 You can use above script to do show/hide elements depending on the screen size.

 

[gizmola]

100% what requinix said.  Unless there is some important reason you need to try and differentiate between "mobile" devices and whatever other client might be consuming your site, all that matters is that your site is responsive.  It's probably just as important that your site looks good on large screens rather than designing to a one-size fits all mentality.  min-width and max-width can be helpful.

Some of that is using newer layout features like flexbox or grid, and avoiding fix sizes.  

• Use em and rem for typography.
• learn about attributes relative to the viewport like vw, vh, vmin & vmax.
• learn about min-width and max-width
• style images with width: 100% so they expand and contract.
• learn and use flexbox and/or grid for your layout
• learn media queries and how to use them

A basic example would be a nav bar styled using flexbox.  

With flexbox you would have a container/parent element like "nav"

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS would be something like this:

nav ul {
    list-style: none;
    padding: 0;
    font-size: 3rem;
    display: flex;
    justify-content: center;
}

nav li {
    margin-left: 2em;
}

nav a {
    text-decoration: none;
    color: #707070;
    font-weight: 700;
    padding: .25em 0;
}

nav a:hover,
nav a:focus {
    color: lightblue;
}
@media (max-width: 650px) {
    nav ul {
        flex-direction: column;
        font-size: 1rem;
    }
    /* have to reset the margin for centered menu items */
    nav li {
        margin: .5em 0;
    }
}

You can play with the max-width value here, but this illustrates a pretty standard technique of having a desktop layout that you then modify using one or more media queries, to change your desktop styles to something more mobile friendly.  

In this example, I have the nav with a default "row" orientation.  The li items are centered and layout in a row across the screen.  When the width of the browser is shrunk below the threshold of 650px wide, I change the "nav ul"  flex-direction to "column" which causes the li items in the nav to be in a column. I also reduce the font-size and change the margin property so the text is no longer centered.

This is a very simple example, but it should give you a jumpstart into what "responsive" design offers.

[Strider64]

I personally design for mobile first as that also takes care of most devices that are browser standard. What I mean is all the content goes does in succession at 100 percent which looks pretty good on a smartphone and other devices that don't recognize CSS. You can still stylize for mobile (smartphones for example), but really shines for larger devices like tablets, laptops and PCs. There you have the full arsenal of CSS with Grid or Flexbox, I personally like using Grid to design the overall design of website though media queries is a must in order for it to determine what device a person is using.  I developed a simple Codepen demonstrating what I mean here - https://codepen.io/Strider64/pen/gOGqrxo

Everyone does their CSS a little differently, but as a whole the foundation is the same when it comes to Grid, Flexbox and media queries.

That's my .02 cents