1

So I’m drinking the Kool Aid and trying to create a responsive ASP.NET website using VS 2013 and Bootstrap, and I’ve hit a problem I don’t understand and don’t know how to deal with.

The site seems to be coming along pretty well, and all the Bootstrap stuff appears to be working properly when I view the site in a web browser and in the various Windows Phone emulators. The problem is that the site does not behave properly when I view it on my actual, physical, Windows Phone.

My phone is running Windows Phone 8.0, and the emulators claim to be emulating WP 8.1. I’m assuming that this would explain the difference in behavior, but I’m not sure and I don’t really know how to figure this out.

To simplify the problem, I created a blank ASP.NET Web Application in VS, and copied enough stuff from Site.Master into Site.Mobile.Master so as to create a Bootstrap navbar. I then uploaded the whole thing to Azure so as to be able to view it online.

Apparently I cannot post images up here nor can I post more than two links, so describing what's going on is a little bit of a challenge.

I’ve shared a folder on OneDrive that contains the two screen shots and Site.Master and Site.Mobile.Master from the project. I haven’t modified any other files. The folder’s address is http://1drv.ms/1lCW0TA .

In this folder, you'll see "Emulator Screen Shot.jpg" which is what the page I created looks like in the 8.1 emulator. You'll notice that the top navigation bar is pretty much what one would expect from a Bootstrap site.

You'll also see "Phone Screen Shot.jpg" which is what the same website looks like on my mobile device. Note that the top navigation is a mess.

If you want to look at it on your own device, the address is http://mobilemenus.azurewebsites.net.

So, my questions are,

1) What’s going on here? Is the browser in WP 8.0 not capable of rendering this stuff properly? Or am I doing something incorrectly that’s causing it not to work?

2) More importantly, how am I supposed to fix this? Given how simple this example is, I’m having a tough time believing I’m the only person in the world to be having this problem, but I can’t find any discussions of this issue online.

The website works fine on my Kindle. Unfortunately I don’t have an iPhone to test on, so I don’t know what it looks like on an actual iPhone.

I was hoping to finish this and get it deployed in the next couple of weeks, and it would sure be nice if it worked properly on existing Windows Phones.

Thanks in advance for any help.

-Rob

Rob
  • 33
  • 3

2 Answers2

1

This looks like it is working exactly as it should. You are most likely using an emulator with a small screen resolution. The default emulator uses an 480x800 screen resolution. Your device has a resolution width of 768x1280 (value obtained from your screenshot. You can change bootstraps logic to not have a min/max width of 767/768 with some css. I've gone as far as just changing my local copy of bootstrap.css by doing a find/replace. You can also create a new css file that overrides certain values. You'll want to load that css file after the main bootstrap css. A handy way to test screen resolution is with Chrome. Hit F12 to open the debugging tools and as you change the size of chrome, it will display the resolution of the page in the top right corner.

Shawn Kendrot
  • 12,425
  • 1
  • 25
  • 41
  • Ok, this was useful. I found a good discussion of this here: [link](http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse). So as a followup question, given an arbitrary device (such as a Kindle) how do I determine its resolution for debugging this stuff? Dumping screen.width from Javascript doesn't seem to return a useful number. – Rob Apr 23 '14 at 06:05
  • For anyone else reading this, I found a good discussion about how to work around this problem here: http://geekswithblogs.net/dotgeek/archive/2013/08/06/how-to-fix-the-bootstrap-issue-on-windows-phone-8.aspx – Rob Apr 23 '14 at 17:04
  • @Rob You want `window.innerWidth`. There are diagnostic sites like http://ryanve.com/lab/dimensions/ to help with checking viewport dimensions. – cvrebert Apr 24 '14 at 01:37
  • Thanks! What's interesting is that this page shows my @media breakpoint as 320 on my Windows Phone, but media queries seem to react at 768. I'll have to play with this on some other devices. – Rob Apr 24 '14 at 19:27
0

This is a well-known bug on Internet Explorer 10 for WIndows Phone 8. Since you're using ASP.NET you have the chance to fix it server side once on your master page.

        var style = new StringBuilder(
            "<style type=\"text/css\">" +
            "@-webkit-viewport{width:device-width}" +
            "@-moz-viewport{width:device-width}" +
            "@-ms-viewport{width:device-width}" +
            "@-o-viewport{width:device-width}" +
            "@viewport{width:device-width}");
        var browserCapabilities = Page.Request.Browser;
        if (String.Compare(browserCapabilities.Browser, "IEMobile", StringComparison.OrdinalIgnoreCase) == 0 &&
            browserCapabilities.MajorVersion == 10 && browserCapabilities.MinorVersionString == "0")
            style.Append("@-ms-viewport{width:auto!important}");
        style.Append("</style>");
        var placeholder = new Literal {Text = style.ToString()};
        Page.Header.Controls.Add(placeholder)

Here's the whole article to fix the windows phone bug.

Igor
  • 383
  • 3
  • 11