How to resolve the bug of viewport on Windows Phone?
I use the code below, which is for him to change the background on the Smartphone, but it continues with the background of 1200px.
@media (max-width: 767px) {
.jumbotron.top {background:url('../images/topo_xs.jpg');}
}
I should use the:
@-ms-viewport { width : device-width ; }
But I do not quite understand how! Could anyone explain?
This is a recurring bug, which Microsoft never knew how to attack consistently. Maybe now, with the shutdown of IE machines things adjust in terms of browser there. They posted an update once ( this , if I'm not mistaken) saying that they fixed the bug but, as I said, it is recurring.
Anyway, an unpretentious (and maybe not current) solution is as follows: Insert the following tags in your header:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Along with the following code, also in the header:
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);
}
This code only works when the browser is IE10 mobile. In most cases, it solves the viewport problem. Like I said, it's a not very fancy fix, which was discussed in detail here / a>.
I hope I have helped.