0

My site has a fluid design between 800px and 1280px. (I appreciate many display resolutions exceed this now).

In 10 inch tablets the site displays best with a viewport width set at 800px allowing the tablet to scale this to its window size. This way fonts are a decent size and images are not much affected by blurring given the small display.

Desktop browsers ignore the viewport meta tag and display between 800px and 1280px, and a background beyond this.

IE10 on Windows 8 however implements the viewport tag on both desktops and tablets and therefore implements the 800px layout on desktops. This results in unacceptably blurred images and giant text on larger displays.

Using CSS the best I approach I have been able to find is something like this (assuming the Windows Surface has a width of 1366px):

@media screen and (max-width: 1023px) {
    @-ms-viewport { width: 800px; }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
}

@media screen and (min-width: 1367px) {
    @-ms-viewport { width: device-width; }
}

This still means desktops will have zoomed images and text unless the display exceeds 1366px resolution. Using max-device-width in the media query does not seem to offer much given that the Surface has a similar native resolution to many desktops.

Alternatively, I could detect the tablet and set the viewport width with Javascript or detect it with PHP and deliver a different stylesheet.

No doubt there is a better way to do this, preferably with CSS?

Thanks, appreciate any suggestions.

martin
  • 393
  • 1
  • 6
  • 21
  • You may try to play with meta viewport. It should take affect on tablet only < meta name="viewport" content="width=800px"> – Sergei Grebnov Feb 05 '13 at 23:34
  • Thanks Sergei, you are correct that if I use just the meta tag then IE10 on my desktop ignores it. The desktop does however respect any @-ms-viewport rules in the css, which was my problem. However, do you know if the Surface Tablet respects the meta tag, the Windows 8 tablet simulator does not? – martin Feb 06 '13 at 10:42
  • Confirm - meta tag is not recognized on Surface - tested today on real device. So my recommendation above is wrong:( – Sergei Grebnov Feb 20 '13 at 11:58
  • Thanks Sergei. So the only solution with my scenario seems to be a javascript approach based around the user agent? – martin Feb 20 '13 at 13:27
  • Seems yes, http://stackoverflow.com/questions/13076839/what-is-the-user-agent-string-for-surface-rt http://blogs.msdn.com/b/ie/archive/2012/07/12/ie10-user-agent-string-update.aspx – Sergei Grebnov Feb 20 '13 at 17:31

0 Answers0