locked
How to make an app compatible with any resolution

    Question

  • I'm working on an HTML app for a website. When I create this app on my Windows 8 PC, everything looks great. The size of my div is exactly like I want to etc. However, when I test this app on my tablet, it's totally different. The div is too small in landscape mode, and too big in portrait mode. How could I make it fit in all resolutions?

    Here is my CSS Code:

    @media screen and (-ms-view-state: fullscreen-landscape) {
    }
    
    @media screen and (-ms-view-state: filled) {
    }
    
    @media screen and (-ms-view-state: snapped) {
    }
    
    @media screen and (-ms-view-state: fullscreen-portrait) {
    }
    
    #TopBorder
    {
        ;
        left: 0%;
        top: 0%;
        right: 0px;
        bottom: 94.2%;
    	background-image: url(/images/topborder.gif);
        background-repeat: repeat;
    }
    
    Thanks!
    Thursday, June 27, 2013 3:39 PM

Answers

  • Hi,

    I think you can add your css style in the different screen state.Like this:

    @media screen and (-ms-view-state: fullscreen-landscape) { #TopBorder { left: 0%; top: 0%; right: 0px; bottom: 94.2%; background-image: url(/images/topborder.gif); background-repeat: repeat; } } @media screen and (-ms-view-state: filled) { #TopBorder { background-image: url(/images/topborder1.gif); background-repeat: repeat; } } @media screen and (-ms-view-state: snapped) { #TopBorder { }

    } @media screen and (-ms-view-state: fullscreen-portrait) { }

    I think you can see some sample code about the css style in Winjs.

    http://code.msdn.microsoft.com/windowsapps/Windows-8-app-samples-3bea89c8

    Hope this helps!

    Wednesday, July 03, 2013 10:05 AM
    Moderator

All replies