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!

  • Remove image from cache in Glide library
  • PlacePicker.getPlace() is deprecated
  • Handling and Mitigating IllegalStateException (“failure saving state: active $Fragment has cleared index: -1”)
  • Custom view constructor does not get called on android 5.0.2
  • Is it possible to use BitmapFactory.decodeFile method to decode a image from http location?
  • smoothScrollToPositionFromTop() is not always working like it should
  • @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:

    New PhoneGap 3.0 The import org.apache.cordova cannot be resolved
    how to set the Style Attribute Programmatically in Android?
    How to set the height of an item row in GridLayoutManager
    Android: How to fill RelativeLayout to full width of screen?
    Avoid splash screen activity when pressing Back button
    Why is my Android app name same as the launcher activity name?
  • Are Custom Objects Passed by value or passed by Reference in Fragments and Activities.?
  • Android: Check if EditText is Empty when inputType is set on Number/Phone
  • buttons below expanding scrollview
  • Why MediaPlayer throws NOT present error when creating instance of it?
  • Android Convert Px to Dp (Video Aspect Ratio)
  • Opencv increasing accuracy of threshold
  • 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.