Scaling according to DPI sample

This sample describes how to build an app that scales according to the dots per inch (dpi) (pixel density) of the screen by loading images of the right scale or by overriding default scaling. This sample uses the Windows.Graphics.Display API.

 
 
 
 
 
4.5 Star
(2)
26,712 times
Add to favorites
11/26/2013
E-mail Twitter del.icio.us Digg Facebook

Solution explorer

C++
C#
JavaScript
VB.NET
/*
THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.

Copyright (c) Microsoft Corporation. All rights reserved
*/

/* styles */

/* 
Customize the layout depending on the scale percentage 
Scale-100: 96 Logical DPI
Scale-140: 134.4 Logical DPI
Scale-180: 172.8 Logical DPI 
*/
@media all and (max-resolution: 134dpi) {
    /* Regular content size when scaled by 100% */
    #overrideFont {
        font-size: 20pt;
        font-family: "Segoe UI";
    }
}

@media all and (min-resolution: 134dpi) {
    /* Override content size when scaled by 140% */
    #overrideBox {
        width: 71.43px;
        height: 71.43px;
    }

    #overrideFont {
        font-size: 11pt;
        font-family: "Segoe Script";
    }
}

@media all and (min-resolution: 172dpi) {
    /* Override content size when scaled by 180% */
    #overrideBox {
        width: 55.56px;
        height: 55.56px;
    }

    #overrideFont {
        font-size: 9pt;
        font-family: "Segoe Script";
    }
}

#overrideTable {
    margin-left: 40px;
}

@media all and (orientation: portrait) {
    /* Sample styling for Portrait*/
    #overrideTable {
        margin-left: 0px;
        margin-top: 20px;
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: LightCyan;
}

.boxDescription {
    font-size: 11pt;
    font-weight: 700;
}

#standardFont {
    font-family: "Segoe UI";
    font-size: 20pt;
    color: #00b9f2;
}

#overrideFont {
    color: #00b9f2;
}