As I mentioned on Saturday, I just updated my blog theme to something a bit more clean and modern. In addition to just wanting something that looked good, one of the features that factored into my choosing the Wise Words theme for Orchard was its support for responsive web design, leveraging Twitter bootstrap and bootstrap responsive to automatically reformat content and resize elements depending on the available screen real estate.
Unfortunately, one thing that didn’t work well was when I browsed the site from Internet Explorer 10 on Windows Phone 8. Apparently, due to a bug (more on this later), the device adaptation code in the bootstrap responsive CSS does not receive the correct value, so the rules that should reformat the site to be more readable on mobile devices isn’t applied. So what I ended up with on the phone was something like this:
Granted, that’s not terrible, since it’s easy enough to tap to zoom in, but the layout isn’t ideal for mobile, and the navigation links are way too small. The theme is supposed to swap out the links for a dropdown menu once the screen drops below 767 pixels wide, but that’s not happening here due to the bug.
What’s Wrong, and How to Fix It
Once I saw what was happening, I did a quick search on Bing, and quickly located the answer via a nice blog post from Damyan Petev of Infragistics. Damyan, in turn, points to this blog post from Matt Stow, which contained both the explanation of the issue, and a workaround that was created with the help of Rey Bango, a fellow Microsoftie.
The short version of what’s wrong is that the draft CSS Device Adaptation feature in IE10 on Windows Phone 8 does not return the expected value, but rather the actual pixel width of the screen, which is 768 pixels on, for example, the Lumia 920 (which happens to be what I’m testing on). As a result, the rules that deliver an optimized mobile experience at 767 pixels or less aren’t applied.
OK, great. now how do we fix it? Well, the initial suggested fix was to simply hardcode the desired viewport width using the following:
1: @media screen and (max-width:400px) {
2: @-ms-viewport{
3: width:320px;
4: }
5: }
That would potentially fix the problem, but as Tim Kadlec observes, it also would end up applying the “fix” to all future devices, whether they need the fix or not. Probably not optimal.
The other fix recommended by Rey (and the one I ended up using), uses a CSS rule of @-ms-viewport {width:device-width} (note that it’s vendor-prefixed because this is still a W3C draft specification), along with a snippet of JavaScript that looks for IE10 on Windows Phone 8 and injects a style rule to fix the underlying issue:
1: if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
2: var msViewportStyle = document.createElement("style");
3: msViewportStyle.appendChild(
4: document.createTextNode(
5: "@-ms-viewport{width:auto!important}"
6: )
7: );
8: document.getElementsByTagName("head")[0].
9: appendChild(msViewportStyle);
10: }
With that code in place on my blog, I get much better results:
Definitely more readable and navigable on a smaller screen.
Bonus Tip for Orchard CMS Users
For those of you who, like me, are using Orchard CMS for your blogs, here’s what I did to add the script to my site. Orchard CMS provides many, many points at which you can customize output, but it’s sometimes simplest to use theme files for customization. I wrote a while back on using the Orchard Designer Tools module for customization, and in fact I went back to that post for a reminder on how to do just that as I was updating to my current theme. Unfortunately, because the script in question needs to be the first script to run inside the
section of the page, this technique would not do the trick.Instead, I was reminded, thanks to the “Anatomy of a Theme” Orchard docs, about the file document.cshtml. This file is typically not found in any given theme, but can be copied from the SafeMode theme and customized for a given them if desired. The reason this was of interest is that it is document.html that is responsible for rendering the
element of any given document in the Orchard site.So I copied document.cshtml from the Views folder of the SafeMode theme into the Views folder of the WiseWords theme, and added the fix script to the
section of the document. A pretty simple fix, and as you can see above, it works quite well.Conclusion
It probably doesn’t come as a big surprise that when you’re dealing with draft specifications, a bug or two might exist in early implementations. Thankfully, there are lots of good folks like Matt, Tim, and Rey, who are quick to publish their findings and fixes to help us work around them. And despite the need for the workaround, I was pleasantly surprised at how easy it was for me to make my blog more responsive and easier for mobile device users to read. I’ve still got a few more fixes to make, mostly due to some layout decisions I made in a few posts (