-1

Its been a while since the difference between PCs and Smartphones screens resolution becomes quite close. So i think distinguishing between the 2 using @media max-width isn't quiet precise.

Am i wrong or is there any other way to do it better?

Edit: After i asked the question, I got an idea, i thought using the centimeters(cm) unit instead of pixels is the easiest way to distinguish between a small and big screens. but unfortunately the metric system isn't well supported it seems, it works flawlessly with my PC, but my mobile phone think that his width is more than 10cm even 20cm long.

I'm currently using @media orientation to distinguish between PC and Tablet&Mobile. my main concern is the mobile as it's width is so small on portrait orientation for wasting space on page margins, so this is enough for me now.

habibhassani
  • 486
  • 1
  • 6
  • 15
  • 1
    Don't. You should build your CSS based on screen size; if a smartphone's screen is big enough to look like a computer, that's OK. – SLaks Nov 02 '18 at 17:28
  • @SLaks That's not entirely true. Even large screens (like iPad Pro's) won't be able to interact with things like `:hover` any better than the smallest screen phone. – Bryce Howitson Nov 02 '18 at 17:55
  • But even if a mobile width resolution is high, you wouldn't want to make page margins because in the end the screen is still small. witch make me remember i can use cm, thanks. – habibhassani Nov 02 '18 at 17:56

2 Answers2

2

Remember you can use multiple tests in one query as well as AND/NOT/OR functionality in media queries

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {}

I've found testing for pixel-ratio > 1 and/or resolution (dpi) combined with device width useful in catching a lot of mobile devices.

Bryce Howitson
  • 7,339
  • 18
  • 40
1

It seems there is no best practice currently and it is recommended to use multiple tricks to detect whether or not the user is using a mobile browser.

Heres a similar question with recommended tricks

Detect if a browser in a mobile device (iOS/Android phone/tablet) is used

sircrisp
  • 1,037
  • 4
  • 17
  • 32