3

Windows 8.1/8 has a split screen feature which is nice while using multiple apps (like modern UI version IE11) in one screen. Most of the time when you set the IE split screen very narrow, you'll notice the web page zoomed out automatically, but some pages (like microsoft.com) are different. They doesn't zoom out and recognise the narrow width correctly, so it's easy to do some responsive deign.

My question is: What code made that difference? I've tried <meta name='viewport' content='width=device-width, user-scalable=0, initial-scale=1.0' /> but IE11 still zooms out the page.

Wise Simpson
  • 305
  • 3
  • 9
  • That's because they are using media queries in css to change the design of the page when the client width changes. – Shiva Dec 09 '13 at 07:01
  • That's not the reason. I use CSS media queries in my page too, but it only works when the width can be detected correctly. After IE11 zoomed out the page, the css still detected the width is wide. – Wise Simpson Dec 09 '13 at 07:17
  • Sorry, maybe you are right. I used "min-width" in the CSS media queries. I'll try "min-device-width" instead. Thanks Shiva. – Wise Simpson Dec 09 '13 at 07:23
  • No luck. IE still zoom out the page even I already set the "min-device-width". Does anyone know the answer? – Wise Simpson Dec 09 '13 at 09:54
  • Wise, it would be helpful if you can share your css code. – Shiva Dec 09 '13 at 10:00
  • It's like `@media screen and (max-width: 400px){#example{width:300px}} @media screen and (max-width: 1000px){#example{width: 600px}}`. Then in modern UI IE11, move the split screen to about 300px width. IE11'll render the #example as `width: 600px` but zoomed out. I'm expecting #example width to be 300px. – Wise Simpson Dec 09 '13 at 11:34
  • 1
    Could you provide the URL of the page? I tested some responsive web sites but I couldn't reproduce the issue. – Carlo Cannas Dec 10 '13 at 15:44
  • Yes, I made a sample page for this. http://log4u.net/test.html – Wise Simpson Dec 13 '13 at 03:51

1 Answers1

2

I got the answer finally. The short version is:

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

The full explaination is at http://msdn.microsoft.com/en-us/library/ie/hh708740(v=vs.85).aspx

Wise Simpson
  • 305
  • 3
  • 9