0

In the modern days of hi-resolution handhelds, is it possible to detect handheld with CSS media queries only and not by resolution? I don't want to target iPads only like some other questions here, I want to be sure if I'm using a handheld browser or a desktop browser so the user will see mobile CSS on hi-res tablets and will not see mobile layout if he resizes the browser window. Is that possible with CSS only?

waterplea
  • 3,462
  • 5
  • 31
  • 47
  • 1
    Maybe this will help you: http://stackoverflow.com/questions/14942081/detect-if-a-browser-in-a-mobile-device-ios-android-phone-tablet-is-used – node_modules Mar 29 '16 at 08:30

1 Answers1

0

You use it for example like this

@media handheld and (min-width: 700px) and (orientation: landscape) { ...  }

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

To be noted, unfortunately many "handheld" still doesn't pick up that type so you will have to address those individually.

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

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • @C0dekid.php Yeah, I know ... updated with a note and posted as a wiki as there is a good answer already. – Asons Mar 29 '16 at 08:38
  • That's the problem that many handhelds, namely Apple stuff, don't support it because it "does not supply high-end web content" whatever that was supposed to mean. – waterplea Mar 29 '16 at 08:39
  • @pokrishka Why do you need to know if it is handheld? .. I strongly recommend your work on a resolution based solution. – Asons Mar 29 '16 at 08:42
  • the UX team in the project has it as a requirement that a mobile touch oriented design is shown in any handheld/tabled, no matter how big it is and desktop design is shown on desktops even when you resize the screen (scrollbars introduced). – waterplea Mar 29 '16 at 08:52
  • @pokrishka The is not one answer to your question, follow the links in my answer and their links and so on .. you will see that it is quite a challenge to address "mobile touch oriented" devices ... especially with media queries only (scripting will help vastly). – Asons Mar 29 '16 at 09:03