2

is there some "best-practice" to detect mobile devices, which physically have small screen, but with high pixel definition? for example some smartphones has and 4.7 inch screen size, and at the same full-hd 1920x1080. i need to show mobile header on site instead of standart desktop, and use css query for this. for example

@media (max-width: 1024px){

    #responsive_mobile_header{
        display: block;
    }

    #desktop_header{
        display: none;
    }
}

this works for a big amount of devices, but for full-hd mobile i need another way...

regexp also not the best way - new browsers and new id appear suddenly, they will not be detected

kpblc
  • 903
  • 8
  • 24
  • 2
    You can use `min-device-pixel-ratio` or `min-resolution` (in dpi). See [here](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) and [here](https://css-tricks.com/snippets/css/retina-display-media-query/) for more info. – Rory McCrossan Nov 03 '15 at 07:57
  • Have a look at this :) https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Kees Sonnema Nov 03 '15 at 08:03
  • Possible duplicate of [What is the best way to detect a mobile device in jQuery?](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) – Rudie Visser Nov 03 '15 at 08:14
  • i already saw this. but i think regex - it's not the best way. but thanks for link, maybe someone else will use it). – kpblc Nov 03 '15 at 09:25
  • @RoryMcCrossan thx i try to use it! – kpblc Nov 03 '15 at 09:26

0 Answers0