# Sunday, 03 March 2013

If you’re a web developer, and you’ve been making web sites for mobile devices you’ve no doubt come across using this META tag to control the width of the browser’s view window.

<meta name="viewport" content="width=800" />

Given the snippet above, the window would be constrained to a pixel width of 800 pixels. If you don’t know how this works, basically it’s like resizing your desktop browser window to 800 pixels, since the user can’t do such a thing on a mobile phone browser you as the content provider would need to do it.

In any case, pretty much all modern mobile web browsers would support the use of this to control the viewport window width. And of course, so does Internet Explorer 10 for Windows Phone 8. Kind of…

It’s not that IE10 doesn’t support the use of the viewport meta tag. But rather it’s limited in what can be supported. From my testing you are able to set the viewport width to these values using the viewport meta tag:- 240 (Will be resized to 320), 320 and 480.

Setting the width to any value other than those mentioned would result in the default width of 1024 to be used, and that’s not what you want!

So? Is all hope lost if you need to set a arbitrary width value for your viewport in IE10? Is it time to add to the #iesux hash tag archive?!

Nope.

While we can’t have full control over the viewport width using the META tag, we can use another method which is through the use of the CSS device adaptation features. Basically you just need to include in your css file somewhere a directive like this.

<style type="text/css">        
    @-ms-viewport {
        width: 550px;
    }
</style>

No no no, put your pitch forks back down this is not a Microsoft only feature, the MS prefix is just to indicator that it’s still a vendor specific extension like how box-shadow and border-radius used to have it. See.. here’re the W3C specifications for this.

Anyway, with this you will be able to set the viewport to any value which you want. Therefore when you want to set a viewport width and make sure it works with all mobile browsers you would make your page contains something like this.

<meta name="viewport" content="width=550" />
<style type="text/css">
@-ms-viewport { width: 550px; }
</style
>

Anyway here are a few more notes regarding this viewport setting.

When doing testing on your Windows Phone with different viewport values, don’t just REFRESH the page whenever you update the viewport value. Usually the phone doesn’t respect the new viewport value when you just do a refresh, best to close the tab and open the URL from a new tab.

Internet Explorer 10 on Windows 8 (not phone, the actual PC version) in both Metro and Desktop modes will actually respect the @viewport value. Just remember that the Metro IE has it’s zoom level turned up a bit by default. The fact that a PC browser actually respects the @viewport directive could lead to some interesting applications.

Finally I find it funny that the compatibility repository Can I Use doesn’t seem to have an entry for @viewport wonder if it’s because it’d bad to show MS actually being ahead of everyone else in supporting something. Smile with tongue out


Note that you can Post As GUEST as well.
blog comments powered by Disqus