×

Discussion Board

Results 1 to 12 of 12
  1. #1
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    105

    Question Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Has anyone else run into a problem with setting viewport dimensions on a Lumia 920 in a webbrowser control? The Microsoft way to force the viewport to adopt the actual screen resolution is to put:

    Code:
    @-ms-viewport {
            width: device-width;
            height: device-height;
         }
    into the CSS file. I need this in order to create a full-screen sliding image gallery. In any case, my code is working perfectly in all of the emulators (haven't tried the 1080p yet). My image shows up perfect and the screen.width reports 480 for a WVGA screen and 768 for an WXGA screen.

    As soon as I put it on my actual Lumia 920 (with developer GDR3), the screen measurements don't give the correct resolution. I get 371x619. According to the GDR3 docs, "device-width" is now supposed to give the actual width in INCHES * 160. So the reported numbers translate to 2.32 inches x 3.87 inches, about right.

    #1. Can I leverage this to set the viewport? There is no pixeldensity for wp8 as far as I know.

    #2. I have been able to use scriptnotify to get the screen resolution in c# and put it back into the browser using invokescript, but every attempt to change the CSS file after the page has loaded has yielded no change in the viewport width/height.

    What can I do to address this?

  2. #2
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    543

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Is this answer any good?

    http://social.msdn.microsoft.com/For...orum=wpdevelop

    (I currently use a meta tag in a WP7 app to achieve a similar effect but the WP8 WebBrowser control behaves a little differently)

  3. #3
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    105

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Not really. Even when I don't use any viewport settings, the screen.width and .height still return those incorrect numbers. I may have to change how I'm trying to do my layout, but as an HTML5/CSS/JS noobie, I'm having a hard time.

    http://eightmedia.github.io/hammer.j.../carousel.html

    This is what I'm trying to do, but instead of text, put a canvas containing an appropriate resolution image that matches the phone's resolution.

  4. #4
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    543

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Maybe others will have suggestions. In the meantime, these are the pages I referred to for my WP7 app...

    http://blogs.msdn.com/b/iemobile/arc...s-phone-7.aspx

    http://blogs.windows.com/windows_pho...-viewport.aspx

    ...while I think of it, make sure the HTML5 document is valid (has a DTD, etc) otherwise the browser will run in quirks mode where nothing seems to work right

  5. #5
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    105

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Figured it out, I think. I need to test more, but this seems to work. FYI, I'm using Cordova, so you just need to ignore the Cordova part and modify your url wherever you are calling navigate.

    1. In CordovaView.xaml.cs, find the StartPageUri property and change it to this:

    Code:
    protected Uri _startPageUri = null;
            public Uri StartPageUri
            {
                get
                {
                    if (_startPageUri == null)
                    {
                        // default
                        string width = "";
                        string height = "";
                        try
                        {
                            var _resolution = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");
                            width = _resolution.Width.ToString();
                            height = _resolution.Height.ToString();
                        }
                        catch
                        {
                            width = (App.Current.RootVisual.RenderSize.Width * App.Current.Host.Content.ScaleFactor / 100).ToString();
                            height = (App.Current.RootVisual.RenderSize.Height * App.Current.Host.Content.ScaleFactor / 100).ToString();
                        }
                        return new Uri(AppRoot + String.Format("www/index.html#width={0}&height={1}", width, height), UriKind.Relative);
                    }
                    else
                    {
                        return _startPageUri;
                    }
                }
                set
                {
                    if (!this.IsBrowserInitialized)
                    {
                        _startPageUri = value;
                    }
                }
            }
    Notice that the parameters do not begin with a question mark (?) but a hash (#). This is important.

    2. On your index.html page (or whatever your start page is). Remove any reference to <meta name="viewport"> and add this code in at the top of the head:
    Code:
    <script>
            var width, height;
            var args = window.location.hash.split('&');
            for (var i = 0; i < args.length; i++) {
                var pair = args[i].split('=');
                if (decodeURIComponent(pair[0]) == 'height') {
                    height = Math.round(+decodeURIComponent(pair[1]));
                }
                else {
                    width = Math.round(+decodeURIComponent(pair[1]));
                }
            }
            document.write('<meta name="viewport" content="width=' + width + ', height=' + height + ', user-scalable=no">');
        </script>
    That should do it. Also, make sure your CSS file is not calling @-ms-viewport anywhere. You shouldn't need it.

    ***edited to make it work with 1080p phones correctly. I think it should be backwards compatible with GDR2, too.
    Last edited by leemcpherson; 2014-01-10 at 21:31. Reason: Didn't work for 1080p phones... now it does.

  6. #6
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    105

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    And thanks for these links... they actually did help. There's a lot of conflicting information about this meta viewport tag. This was the first resource that said to use it instead of the @-ms-viewport style.

    Quote Originally Posted by theothernt View Post
    Maybe others will have suggestions. In the meantime, these are the pages I referred to for my WP7 app...

    http://blogs.msdn.com/b/iemobile/arc...s-phone-7.aspx

    http://blogs.windows.com/windows_pho...-viewport.aspx

    ...while I think of it, make sure the HTML5 document is valid (has a DTD, etc) otherwise the browser will run in quirks mode where nothing seems to work right

  7. #7
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    543

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Yeah, it's a bit odd. I use the <meta> tag approach only.

  8. #8
    Nokia Developer Administrator
    Join Date
    Dec 2013
    Posts
    293

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Hi leemcpherson,

    Congratulations on winning Featured Discussion Board Post of the Week for this question! It was a good question, and a good solution. We also liked that you then went on to respond to other related questions across the boards.

    Would you consider writing a wiki article that summarizes your findings, to help others in the future who encounter this issue? Let me know if you need help getting started.

    Jen

  9. #9
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    105

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Done! Hope it's useful and doesn't require too much editing

    http://developer.nokia.com/Community...ample_Solution

  10. #10
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    543

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Quote Originally Posted by leemcpherson View Post
    Done! Hope it's useful and doesn't require too much editing

    http://developer.nokia.com/Community...ample_Solution
    Looks great!

  11. #11
    Nokia Developer Moderator
    Join Date
    Feb 2011
    Location
    Portugal
    Posts
    933

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    Quote Originally Posted by leemcpherson View Post
    Done! Hope it's useful and doesn't require too much editing

    http://developer.nokia.com/Community...ample_Solution
    That's fantastic Lee. Thanks for taking the time to do this

  12. #12
    Nokia Developer Administrator
    Join Date
    Dec 2013
    Posts
    293

    Re: Lumia 920, GDR3 and HTML5 @-ms-viewport's device-width / device-height issues

    This is great. Thanks for writing that up, Lee!

Similar Threads

  1. Charging issues with developer device(Lumia 800)
    By mrudulpen in forum Windows Phone General
    Replies: 9
    Last Post: 2014-02-17, 01:19
  2. HTML5 Video on Lumia 800
    By nylund in forum Windows Phone General
    Replies: 7
    Last Post: 2012-07-09, 13:46
  3. Replies: 3
    Last Post: 2012-06-13, 12:17
  4. Need Suggetion regarding the width and the height of the mobile device.
    By kpvrlakshmi in forum General Development Questions
    Replies: 1
    Last Post: 2009-07-28, 13:47
  5. JSR-226 Height and Width
    By ThatIsEnough in forum Mobile Java Media (Graphics & Sounds)
    Replies: 2
    Last Post: 2005-08-23, 12:06

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×