Device detecting Conditional css

android css media-queries
11,442

There is no way of detecting an operating system or web browser using strictly CSS.

I'd recommend using Javascript to detect the web browser / operating system, and attach classes to the <body> of the page accordingly.

You can then write CSS specific to each use case, which will only be honored if that particular criteria is encountered.

Here is an example on jsFiddle.

Share:
11,442
user1853128
Author by

user1853128

Updated on November 24, 2022

Comments

  • user1853128
    user1853128 over 1 year

    I am trying to add some conditional css for device detecting, because of some conflicts in desktop and android tablet landscape res

    - if android_device?
        :css

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

            /*CSS*/
          }

    can any one help me out where I have to use this check?

    I got this reference from this url: URL

    • user1721135
      user1721135 over 10 years
      if android_device? - what is this?
    • John Magnolia
      John Magnolia about 10 years
      Only Microsoft think: 'we usually get it wrong, so lets include a way for devs to fix our issues'
  • Makita
    Makita over 10 years
    This doesn't address detecting android devices, only screen width.

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

How to prevent mobile device to resize and use proper css file
What will be the maximum width of tablet to use in media query?
CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?
How to use media Queries for android devices with android version 2.2.1 and 2.3.5 and their screen size of 240 * 320 and screen size of 480 * 800?
How to smoothly animate height in CSS or Javascript on mobile devices
Background-attachment:fixed Not Working - Android Chrome (v40)
Apply CSS class based on media query
Hiding input borders in print stylesheet (chrome)
android autofit mode causing issues with css width in web page
Video with transparency, how to display alpha channel of webm files correctly on every device; VP9 or VP8 encoding?