locked
Problem in Windows 8.1 app CSS?

    Question

  • Hi all,

    I'm migrating my app to Windows 8.1. In order to support variable app width length, I've define 3 set of CSS for my app.

    1) CSS for snap view: between 320px and 500px

    2) CSS for 500px and 672px

    3) CSS for width larger than 672px.

    Now I'm having problem with CSS for 500px and 672px where if the app width is in between that length, the app will not display correctly. I notice that, the app make use of both CSS set no 1 and CSS set no 3 (the content will be displayed in two different view at the same time ie: overlapping each other).

    I'm not exactly sure what's going on. Is this a bug or I miss something (ie forgot to change some codes?)?

    Wednesday, October 30, 2013 3:45 AM

Answers

  • orientation:portrait will activate whenever the app's view width is less than its height. On a 1366x768 display, for instance, this will happen when the width goes below 768. On a 1920x1080 screen (running at 100% scaling, so this would be for a large monitor), the switch would happen when the width is < 1080. This is standard CSS3.

    What you'll generally have, then, are three or four points where the layout adjusts in media queries. You'll have your full-screen landscape styling probably as the default. Then you might have another media query for narrower landscape views, with orientation:landscape and min-width: 900px or max-width: 1024px.

    Then you'll have two media queries for orientation:portrait. One with min-width:673px in your example, the other with max-width:672px. In the latter you'd probably scale down your font sizes and such for the Win8-style snap view.

    Be mindful that there's now a manifest setting that enables 320px min width. If this isn't set, users can't size the app below 500px. So unless you set the 320px option, you can usually have just one orientation:portrait media query that serves device portrait and narrow views alike.

    Does that make sense? (I talk about this some in Chapters 2 and 8 of my second edition preview, by the way).

    .Kraig

    Thursday, October 31, 2013 3:32 PM

All replies

  • Sounds like you have some overlapping styles due to how the media queries are defined. Can you share those?

    Also be sure that you've removed any JavaScript code that uses the ApplicationViewState values, as those are deprecated in 8.1.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Also see second edition preview


    Wednesday, October 30, 2013 4:26 AM
  • Any codes that were deprecated, does is still take effect in the new windows? I've yet to remove/change those deprecated codes, except in the CSS where (-ms-view-state: snapview) changed to (min-width/max-width: xxxpx).

    Wednesday, October 30, 2013 5:36 AM
  • You'll want to remove all the ApplicationView-related code, as that can mess with whatever you're doing in CSS (i.e. conflicting logic). I'm happy to double-check your media queries as well, to make sure they're doing what you want them to do.
    Wednesday, October 30, 2013 5:27 PM
  • Kraig, I've removed all the deprecated codes and replaced with new codes. And now the UI is displaying properly in every CSS set.

    I've one question: How and when exactly the below CSS takes effect?

    @media (orientation: landscape) {
        /* CSS styles for landscape layouts */
    }
    
    @media (orientation: portrait) {
        /* CSS styles for portrait layouts */
    }

    For example, I understand that if the height > width (win8 tablet in portrait view), then it will go into portrait orientation. Let say viewing the device in landscape view, but my app is open snap view (between 320px  and 672px). Since the app height bigger than app width, is this considered a portrait view?

    I'm asking this because whenever I include the @media screen and (orientation: portrait), this will also effect my display when viewed in snap view.....

    • Edited by azmas Thursday, October 31, 2013 2:25 AM additional info
    Thursday, October 31, 2013 2:13 AM
  • orientation:portrait will activate whenever the app's view width is less than its height. On a 1366x768 display, for instance, this will happen when the width goes below 768. On a 1920x1080 screen (running at 100% scaling, so this would be for a large monitor), the switch would happen when the width is < 1080. This is standard CSS3.

    What you'll generally have, then, are three or four points where the layout adjusts in media queries. You'll have your full-screen landscape styling probably as the default. Then you might have another media query for narrower landscape views, with orientation:landscape and min-width: 900px or max-width: 1024px.

    Then you'll have two media queries for orientation:portrait. One with min-width:673px in your example, the other with max-width:672px. In the latter you'd probably scale down your font sizes and such for the Win8-style snap view.

    Be mindful that there's now a manifest setting that enables 320px min width. If this isn't set, users can't size the app below 500px. So unless you set the 320px option, you can usually have just one orientation:portrait media query that serves device portrait and narrow views alike.

    Does that make sense? (I talk about this some in Chapters 2 and 8 of my second edition preview, by the way).

    .Kraig

    Thursday, October 31, 2013 3:32 PM
  • Yes, now I've better understanding about this (and after doing my own test). The app was submitted last week and is now in Windows Store. Thank you for your help Kraig.
    Wednesday, November 6, 2013 1:14 AM
  • Excellent! Glad to hear it.
    Wednesday, November 6, 2013 1:51 AM