CSS Media Queries on Nexus 7, display resolution not working in code

I’m working with CSS Media Queries to load different templates for differently sized devices. I created a spreadsheet listing the display resolution of testing devices and the most common devices to come up with the size cut-offs. One of the devices that I’m testing is the Nexus 7 of which I’ve found the display resolution to be 1280 ร— 800. However when I use these values in my code, it doesn’t work.

**the only reason I’m using no max or min is because I’m trying to find the exact resolution. If I replace with max-device-width with something rather large, it works and I’ve done enough testing to know that it works with various max values given but in order to properly complete my code to differentiate between 3 differently-sized device categories, I have to make sure I’m creating the right cut-offs. Is CSS resolution different? Thanks for any and all help in advance!

  • Making GSON & Realm play nice
  • Posting LinkedIn message from Android application
  • Cordova Error on Build Only for Android: com.android.dex.DexException: Multiple dex files define Landroid/support/annotation/AnimRes;
  • How can I set up Vim for Android development?
  • How can I improve the look and feel of an Android app?
  • Keeping the same SQLite database when upgrading and Android app from Lite to Pro version
  • @media only screen and (device-width:1280px) and (orientation:landscape) {
    /*style --code removed for sack of space */
    } 
    
    @media only screen and (device-width:800px) and (orientation:portrait) {
    
    /*style --code removed for sack of space */
    
    }    
    

    Here is my viewport code in my html file

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    

    Related posts:

    How do I keep the screen on in my App?
    Debugging javascript on Android tablets/phones?
    ActionBarSherlock tab height not adjustable on Jelly Bean
    Change the background color of CardView programmatically
    Change edittext border color
    How to install aps in Windroy?
  • Android : Playing MP3 files with AudioTrack using ffmpeg
  • How to create notification icon badge on Android apps (like iPhone)
  • Compress video like whatsapp
  • Android WebView performance
  • Custom Android calendarView
  • is it possible for Android VM to garbage collect static variables without killing the whole Android application?
  • 3 Solutions collect form web for “CSS Media Queries on Nexus 7, display resolution not working in code”

    There is a difference between screen dimensions in CSS pixels and device pixels.

    In the case of the nexus 7, the native device pixels are 1280 x 800 pixels.

    However, if this was the reported width for media queries we’d end up with responsive designs being triggered for traditional desktop sizes.

    As a result, many browsers settle on a CSS pixel size that more closely resembles the size of traditional pixels before high pixel density displays. Pretty much iPhone 1 – 3 pixel size.

    The device-pixel-ratio reports (device pixels / CSS pixels)

    e.g. 800 / 600 = 1.3333

    To add even more confusion, these ratios sometimes change across OS releases. For example, as of Jelly Bean 4.2 my nexus 7 reports a width of 600px in portrait, down from 603.

    This makes it difficult to target exact devices with width based media queries. I recommend accepting that you’re designing for a huge number of device widths and attempt to create a responsive design that adapts between the range of device sizes that you choose to support.

    Best of luck ๐Ÿ™‚

    Use the following viewport code:

    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
    

    or this for not allowing scaling:

    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    

    The weird part about the Nexus 7 is that (as jpgr posted) it doesn’t allow you to use the 1280/800 space that it boasts (out of the box at least). It is almost as if it is running zoomed in to some degree despite scaling preferences being set.

    I notice this issue when my graphics seems slightly blurry. I tested the window size via javascript and it was posting numbers about 25% lower then expected. You will notice I have exclude the scaling parameters as it seems to ignore them for the most part.

    The real key is using the target-densitydpi = device-dpi… This seems to make very right as rain.

    Love working with the Nexus 7 for sure!!!

    Overly pragmatic answer, but you can basically use the screen size of 601×880 to target the Nexus 7. Not technically complete, but should be enough to get you started if you are trying to use breakpoints in your media queries.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.