Universal Windows 10 App JS Resolution setting

Question

We are developing a UWP in JS. specifically for MS Surface Pro 3 with system resolution 2160X1440. So we wrote CSS only for this resolution. But when we run the application in surface pro We are not able to get the full screen. Only half of the app is visible. Is there a setting in the UWP app or the device we have to do to get the full app render inside the screen? This works fine in a windows10 simulator we configured with 2160X1440

You're most likely hitting DPI scaling on the surface Pro 3. Either write the layout semi-responsively as normal, or set the SP3 DPI down to 100% (or to match that of your simulator) — Johnny Westlake, Jul 20 '17 at 13:50
Did you mean that you just want your app open in full screen when current device's resolution is 2160x1440? — Xie Steven, Jul 21 '17 at 05:39
yeah. I did most cSS in px expecting full screen width to be 2160X1440 — Jins Peter, Jul 21 '17 at 06:44

score 0 · Answer 1 · answered Jul 31 '17 at 05:47

Did you mean that you just want your app open in full screen when current device's resolution is 2160x1440?

yeah. I did most cSS in px expecting full screen width to be 2160X1440

You could check current resolution. If it's 2160x1440, then you could attempt to place the app in full-screen mode by TryEnterFullScreenMode() method.

About checking resolution, you could refer to this thread Get Screen Resolution in Win10 UWP App. The same methods and properties would work in js project.

The FullScreenMode sample for your details.

Actuallu my Yeah was for the first comment to JohnnyWestlake. Sorry For the misunderstanding — Jins Peter, Jul 31 '17 at 06:38

score 0 · Accepted Answer · answered Jul 31 '17 at 06:43

Actually I solved my issue by disabling scaling like what is said in this page. The JS

trySetDisableLayoutScaling(true)

DID NOT Work. but the css media-query scaling worked.

@media (max-height: 1440px) {   
    @-ms-viewport {   
        height: 1440px;   
    }   
}

In one of my apps I did have to set width too like

  @media (max-height: 1440px) {   
        @-ms-viewport {   
            height: 1440px;   
            width:1440px;
        }   
    }

Universal Windows 10 App JS Resolution setting

2 Answers2