-1

I am using max-width: 768px to change looks on my website. But there are many high resolution devices on market (4K Mobile phones etc). How can I detect them? should I use orientation portrait? Or can I specify a aspect ratio as a code? What is the best way to catch all devices for responsive web design?

cursorrux
  • 1,382
  • 4
  • 9
  • 20
ats
  • 69
  • 7
  • Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – Kundan Mar 28 '21 at 17:16

1 Answers1

1

You have multiple options for this problem: Within your media query you can test for the device width, resolution (pixel density), orientation, aspect ratio, pointer option and many more. See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for a full list of options. It is recommended to support your implementation by feature and not by environment. For example you can target dark/light mode or if a device supports hover events instead of checking for phone, tablet, desktop, tv, gaming console … Also you can combine different CSS units like em, vmin, vh, vh, % to get relative measurements. This in combination with CSS grid can already solve many problems without defining a media query. Of course in the end you probably still end up with some media queries. For that I recommend to pick 2-4 common screen sizes even though this is no guarantee that it will cover all devices.

I can also recommend you these episodes from The CSS Podcast

marcobiedermann
  • 4,317
  • 3
  • 24
  • 37