Setting viewport for Windows Surface RT via CSS

Question

I'm making a Website for mobile devices, especially for Tablets. To set the viewport I'm using the meta Tag to controll the range of zooming:

<meta name="viewport" content="width=device-width, maximum-scale=1.8, minimum-scale=0.63"/>

Now I'm facing the problem, that IE10 on Windows surface ignores the Meta Tag, so I tried to set the viewport via CSS rules. Unfortunately the code I've tried is not working:

@-ms-viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}
@viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}

This is from my CSS file. I'm new to media query, so I don't know if the code is correct or if I'm just making some mistakes with the syntax or somthing else. I've also tried:

@media all{
@-ms-viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}
@viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}}

Doesn't work either. So has anyone a solution for controling the range of zooming for the Surface? Or does anyone see the mistakes I'm making?

Answer 1

We had a similar problem when testing our new reponsive site on a surface tablet which we resolved using the following tag

@-ms-viewport { width: device-width; }

However our initial and maximum scale are set to 1 and we're not trying to alter them.

Looking at the MSDN docs for the @ms-viewport here http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx it doesn't appear to support the setting of scale and zoom using the viewport rule, so you may not be able to change this.

These can only be set on the standard @viewport rule http://www.w3.org/TR/css-device-adapt/#the-viewport-rule according to the docs, no idea which browsers support them as yet.

Answer 2

Yep, this had me stumped as well! I couldn't scroll my "coming soon" page beyond the surface RT's screen real estate. I tried the "@-ms-viewport" with not much luck so I went into experiment mode and found something that resolved the issue!

The following I have in my CSS...

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

The trick was overflow-x:hidden; ... As soon as I placed that in IE11 (Both metro & desktop) on the Surface RT allowed me to scroll beyond the screen real-estate! :)

I hope that helps.