0

In many of the questions and answers on stackoverflow.com users recommend using min-width and max-width to identify target device is smartphone or PC (this, this, this questions and many more). Like this:

<link href="template.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">

But today, the resolution of mobile phones has increased dramatically and most mobile phones and computers have the same number of pixels in their width and using this method is not efficient. Is there any alternative method for identify target device?

Update - “A Pixel is Not a Pixel”

This page have very good information about this: Understanding the Difference Between CSS Resolution and Device Resolution

Meysam
  • 105
  • 1
  • 1
  • 6
  • 1
    The method you cite only tells you something about the viewport dimensions (your user could be on a large sceen but a small window for example) so it never really told you whether they were on a smartphone. Could you describe what capability of the user device you are interested in? – A Haworth Jul 27 '21 at 21:09
  • @AHaworth What do you mean by capability of the user device? I only want to identify user device to decide which `css` file to run. – Meysam Jul 27 '21 at 21:17
  • 1
    As it's not possible to keep up with all devices (in terms of make, version etc) I assumed there were some features that you'd want to test for. – A Haworth Jul 27 '21 at 21:22

1 Answers1

0

From what you describe, I think you're complicating your life trying to use multiple stylesheets.

Try using one stylesheet and add media queries as needed.

If you go with the mobile-first approach, you'd start with rules that apply to mobile width viewports, and then you add media queries and extra rules or overrides as you move up to tablet and desktop viewports.

So it could be something like this:

/* rules that apply for mobile viewports */

@media(min-width:481px){
   /* rules that apply for viewports 481px and above */
}

@media(min-width:769px){
   /* rules that apply for viewports 769px and above */
}

@media(min-width:1025px){
   /* rules that apply for viewports 1025px and above */
}
@media(min-width:1201px){
   /* rules that apply for viewports 1201px and above */
}

There's nothing special about the breakpoints I've used, they are for illustration only. It's important that you customise this to match your design.

In practice, start by creating your styles for small, mobile viewports. Then increase your browser's width until your layout fails. Then, check the width of your browser's window, create a breakpoint that matches this, and add new styles for this breakpoint.

Continue the process of increasing the width of your browser's window, and creating new breakpoints and rules to fix any styling issues until you've reached a desktop width window.

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • My laptop width equal my phone = 1080 pixel, so one ruleset will apply to both. – Meysam Jul 28 '21 at 12:56
  • @meysa, you mentioned that you aren't wanting to target any device-specific features. Therefore, if your phone was indeed the same pixel width as your laptop, you'd want to show them the same ruleset. We also want to be sure that there's no confusion between CSS pixels (which is what we're using in media queries) and device pixels (eg retina and higher density screens). As a test, please check https://codepen.io/panchroma/pen/rNmdzYz?editors=0100 on your laptop and see how background colour changes with browser window width. Compare the results for your phone, and your browser at full width. – David Taiaroa Jul 29 '21 at 00:04