locked
min-resolution/max-resolution CSS not working?

    Question

  • I am trying to set up my CSS so it scales the app larger when it encounters a device with a high pixel density. I've constructed the following CSS rule with an obscene large font size to test the CSS rule.

    @media all and (min-resolution: 200 dpi) {
    body {
    font-size:60px;
    }
    }

    I use Blend to test the above CSS rule. In Blend, I select the device with the following info: 1440x1080 @ 240dpi (140%). The above rule should apply, but it doesn't. However, if I change the dpi in the CSS rule to 67dpi, then the rule takes into effect.  Changing it again to 68dpi is a no-go, so it seems like 67dpi is the magic number.  Anything above 67 doesn't make the font

    How does this even make sense? 67 is never mentioned in the device info. Shouldn't the magic number instead be close to 240dpi?

    Am I not understanding this correctly? Is the min-resolution CSS selector not ready for prime time? Is there something wrong with Blend/Visual Studio?

    Thursday, September 25, 2014 4:58 PM

All replies

  • I'm not very familiar with this area. Please provide all of the information I need to ask the right questions about this, along with reproduction steps, and I'll find out more about this or file a bug.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, September 26, 2014 12:46 PM
    Moderator
  • I believe I included all the necessary info.

    Thanks!

    Monday, September 29, 2014 9:15 PM