(function() { if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( document.createTextNode("@-ms-viewport{width:auto!important}") ); document.getElementsByTagName("head")[0].appendChild(msViewportStyle); } })();Quick backstory
For IE 10 (desktop) to work in it’s new “snap mode” you need to use this:
@-ms-viewport { width: device-width; }But that screws up some Windows Phone 8 phones, overriding the meta viewport tag and rendering as far too large on small screens. So the answer, for now, is this gnarly device detection/injection script.
Longer backstory
- Matt Stow: Responsive Design in IE10 on Windows Phone 8
- Tim Kadlec: Windows Phone 8 and Device-Width
We use this but it messes with the zendesk popup because the script happens on load and the zendesk popup is more than 2 times too wide.
I am trying to make a web app for windows phone 8 that requires the full screen resolution
It seems there is no way to discover this
Using:
This will always be 320
Using javascript screen.width returns 320
Using javascript screen.availWidth returns 320
I have put together some code that seems to be working for now:
JavaScript:
CSS:
Any help/advice on this problem would be much appreciated, thanks!
http://jsperf.com/bytagname-vs-head
A solution from a genius on this website: https://www.campaignmonitor.com/forums/topic/7989/windows-phone-8-has-full-css3media-query-support/
He single-handedly has solved the issue! \o/
I am so freakin’ happy to have found this solution that I am posting it all over the web where you guys gave me the hints to create my responsive html. And also as a “thank you” to all your posts.
What I don’t read from any of the posts is that if the code should be in the head inside tag? Or can it be in any of the .js files? If so, then in the header or right after the tag?
In my first sentence I wanted to say “… should be in the head inside script tag?”
This bug was fixed in Windows Phone 8 Update 3.
See: Introducing Windows Phone Preview for Developers
Hello!
There is required the space before the !important. Isn’t it?
“@-ms-viewport{auto !important}”
instead of
“@-ms-viewport{auto!important}”
Otherwise the code will not work!
Oh, sorry.
It was an erroneous assumption!
But I must to tell something else.
In my case.
This code didn’t work before I added the following tag:
Thanks!
Sorry, the code didn’t appear – I meant this
Couldn’t you just do this?
I have included the code as said but still it doesnt fill the purpose. It creates a style node with the inner content as -ms-viewport.
In DOM it created as :
@-ms-viewport{width:auto !important}
The code I have included is right after head tag.
I found new problem with microsoft-edge.
please following link bellow.
https://jsfiddle.net/vxba/pm4zvspn/4/
and help me this problem.
thank very much!
I’m sorry, I posted missing.
firstly add new row with button add.
You can click on green area of button delete and click another button you can see my problem.
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
(scroll down and read the last two entries)
Probably too late for this, but it could be way easier this way:
@media screen and (-ms-view-state: snapped) {
@-ms-viewport { width: device-width }
}