Windows Phone ignores breakpoints

Asked

Viewed 40 times

0

How to solve 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 1200px.

@media (max-width: 767px) {
.jumbotron.top {background:url('../images/topo_xs.jpg');} 
}

Should I use the:

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

But I didn’t quite understand how! Someone could explain?

css twitter-bootstrap windows-phone

1 answer

1

This is a recurring bug, which Microsoft has never known how to attack consistently. Maybe now, with the shutdown of the IE machines things will fit in terms of the browser there. They published an update once (this, if I’m not mistaken), saying they fixed the bug, but, as I said, it is recurring.

Anyway, an elegant solution (and maybe not current), is the following: 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 acts when the browser is IE10 mobile. In most cases, it solves the viewport problem. As I said, it is a fix not very elegant, which was discussed in detail here.

I hope I’ve helped.

Browser other questions tagged css twitter-bootstrap windows-phone

You are not signed in. Login or sign up in order to post.