Wednesday, June 19, 2013

Screen Shots of Win8/IE10 Media Query Values

There is a nifty tool at MQtest.io which gives you a breakdown of how your device reports features you might use for media queries. To use the tool's own explanation:

This test isn’t about what media que­ries your device can or cannot see (but it does show an 'unsupported' label if a device doesn‘t support something). In­stead it shows you which dimen­sions your de­vice will res­pond to when using ‘width=device-width,initial-scale=1.’

As one of the seemingly few owners of a Windows 8 tablet (specifically the Asus Vivo), I sometimes get asked to check sites to make sure that a developer's media queries work properly. It was testing my own site that led me to discover the prefixed styles that IE10 needs in Metro view (which lead to my surprisingly popular post, IE10, Metro, and Media Queries).

Armed with the features that MQtest.io can help identify along with a Win8 tablet, I figured perhaps others without a Win8 tablet could benefit from some screen shots showing the MQTest.io results in various configurations of Internet Explorer 10. Please bear in mind that the numbers are for my device, and probably will not match those you would get from a Microsoft Surface or another Win8 device. At the very least, however, these will show you what tests will run in Win8/IE10 and the types of values you can expect to see.

Win8/IE10 wide desktop.
Screen shot of Internet Explorer 10 on Windows 8 in desktop mode, with the tablet turned horizontally (wider than it is tall).
Win8/IE10 tall desktop.
Screen shot of Internet Explorer 10 on Windows 8 in desktop mode, with the tablet turned vertically (taller than it is wide).
Win8/IE10 wide Metro.
Screen shot of Internet Explorer 10 on Windows 8 in Metro mode, with the tablet turned horizontally (wider than it is tall).
Win8/IE10 tall Metro.
Screen shot of Internet Explorer 10 on Windows 8 in Metro mode, with the tablet turned vertically (taller than it is wide).
Win8/IE10 narrow Snap Mode.
Screen shot of Internet Explorer 10 on Windows 8 in Snap Mode, with the browser in the narrow view.
Win8/IE10 wide Snap Mode.
Screen shot of Internet Explorer 10 on Windows 8 in Snap Mode, with the browser in the wide view.

No comments:

Post a Comment