I've been working on configuring my personal blog, which is hosted on Blogger, to properly adapt to the Windows 8 IE snap feature. Through my research online, it has been suggested that I include a @viewport in the CSS.
However, it seems like the CSS for @viewport is somehow being overridden - when I tested a portion of the source code on a separate file, it worked fine. It looks like there might be something specific to Blogger causing this issue.
Just to clarify:
The blog responds correctly on normal desktop browsers and mobile devices (IE 11 desktop and IE 11 mobile).
When snapped in Metro IE, the blog does not respond properly - instead, the website gets scaled.
The addition of @-ms-viewport { width: device-width; } in the CSS should prevent Metro IE from automatically scaling.
Even after adding @-ms-viewport { width: device-width; } to the Blog's CSS, it continues to get scaled by Metro IE.
Interestingly, when testing the < head > code locally, the local file is not automatically scaled by Metro IE as expected.
You can check out the blog here:
In my CSS, I am using @-ms-viewport { width: device-width; }, which is internally coded.