@Media Query to Target Hi-Res Windows Phone 8+

CSS media query to target Windows Phone Nokia Lumia

Thanks Zitscher for your inputs.
But I found a hack that worked for me
http://blog.simian.co/en/tips/internet-explorer-10-mobile-css-hacks-windows-phone/
(this may be helpful to someone)

@media screen and (-ms-high-contrast: active) and (max-width: 30em),
(-ms-high-contrast: none) and (max-width: 30em) {
       width: 130px !important;
       padding-left:18px !important;
}

This is what I was looking for.
Thanks for your help.

Media Queries: Target all high resolutions displays

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

/* 2 dpr */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi){ 
    /* Retina-specific stuff here */
}

Media Query to Target ONLY Mobile

Found the solution: https://stackoverflow.com/a/18500871/5906166

You need to include this in your header:

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

Explanation:

Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.

Windows Phone 8 - Run XNA in higher resolution

XNA may not support this but it looks like MonoGame (open source port of XNA which works on WP8) will support the higher resolutions. See Nokia's topic on MonoGame and WP8 for a primer.

Opening High Res Images on Lumia 1020

Apparently there is no way to access the original (41MP) image from code on the device.

I've heard lots of people complaining about this, so maybe this will change in the future. But for now it's not accessible.

What is the media query for large desktops?

The challenges of optimizing for large-scale displays center around how to scale and manage content.
You need to assume screen width at certain points.

Example: for class "container"

@media screen and (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}
@media screen and (min-width: 1900px) {
  .container {
    width: 1870px;
  }
}