IE 10 on WP8 ignores media queries?
It looks like you've sorted it now with bootstrap, but it's possible the site kicked in to EmulateIE7 (for compatibility) for some reason. It seems Lumia can also pick up on this for example if you have the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
tag and of course media queries are not supported on IE7.
Viewport for IE10 & 11 desktop, but not mobile
Is this the same issue as outlined in the Bootstrap documentation? If so, getbootstrap.com/docs/3.3/getting-started/#support-ie10-width has a JS fix. From the site:
Windows Phone 8 and Internet Explorer 10
Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
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)
}For more information and usage guidelines, read Windows Phone 8 and Device-Width.
Fixed footer issue on WP8 Emulator
Use iscroll4 and use few media queries in css:
@media screen and (orientation: portrait) {
@-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
@media screen and (orientation: landscape) {
@-ms-viewport {
width: 480px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
This works fine on Windows Mobile 8 Phones. Here is a demo: http://jqtouch.rediffmailpro.com/iScroll/win8Example.html
Related Topics
Jquery-Ui Datepicker CSS Problem
Start Div Scrollbar from Bottom with Pure CSS
CSS Background Image Centered with Stellar Js
Jw Player: Cross-Browser "Display:None" Player Behavior
Cutting a Triangle Out of Div, But Have It Horizontally Centered
CSS Display Property When a Float Is Applied
Shape-Outside of an Image Centered Between Two Text Blocks
Percentage Height in Nested Flex Box
Does a Cache Buster on an Image Url in CSS Cause an Extra Request
Media Query for iPad (Landscape) Applied to Samsung Galaxy Tab 2 (Landscape) as Well
How to Make an Inverse Transparent Circle in CSS
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left
Move Floated Area Inside Paragraph
How to Get The Scale Percentage of an Image When Using Background-Size:Cover
Jekyll Syntax Highlighting Not Working - Classes Are Not Being Added
What Is the Recommended Way to Dynamically Set Background Image in Angular 4