Issue on Windows phone

[generatepress]

I have a customer who was having issues with the display of their site on their Windows phone.

You can see the issue here: https://generatepress.com/forums/topic/windows-phone-scale-issue/

They found that replacing this:

@media (max-width: 400px) {
    @-ms-viewport {
        width: 320px;
    }
}

With this:

@media (max-width: 400px) {
    @-ms-viewport {
        width: device-width;
    }
}

Fixes their issue.

Any reason for this? Am I safe to make this change?

Thanks!

[nathansmith]

Interesting. After reading that thread, I noticed you came across the same article I did (years ago)…

http://timkadlec.com/2013/01/windows-phone-8-and-device-width/

I had a GitHub ticket filed awhile back, which is why I added 320px in the first place. haha.

Sure though, if device-width fixes it, I can get that added to Unsemantic itself.

:)

[nathansmith]

I guess my question is: What Windows phones are still "in the wild" that require an exact 320px to be set?

I suppose maybe we could just remove that @-ms-viewport code entirely now, yeah?

[generatepress]

Hmm, I wouldn't know - never used a Windows phone. Maybe someone here has one and can test it out?

I assume it should just work the same as any other phone these days - at least I would hope.

Maybe just adding device-width for now will work? I wonder if that will cause problems itself?

Thanks for responding so quickly :)

[rantani]

How about this solution? @-ms-viewport { width: auto; }

[generatepress]

It looks like it needs to be this (without the media query):

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

HTML5 boilerplate had to do it too: https://github.com/h5bp/html5-boilerplate/issues/1047

[nathansmith]

Closing this, since Windows Phone has been discontinued.