[Resolved] Windows Phone scale issue

[Tom]

GP 1.3.17 uses the device-width solution we found.

Thanks for pointing out the bug! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nina]

Hi Tom,

No problem! 🙂 So the update is coming soon?

[Nina]

Hi Tom,

No problem! 🙂 So update is coming soon?

[Nina]

Hi Tom,

I updated theme. It seems that you added this block

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

But this will only work width smaller than 400px. I think it’s better use just

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

so then it will always take the whole width

[Tom]

Doing that would most likely cause issues on IE desktop browsers.

Does this not work?:

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

What about if you remove it completely (from the minified file as well)?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nina]

Hi Tom,

This solution doesn’t work. I didn’t notice that this

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

would have caused any issue with IE desktop browser. Doesn’t this only effect mobile devices?

[Nina]

Hi Tom,

Now I can’t override this block to make it work properly from unsemantic-grid.min.css

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

Before this inclusion it was easy to attach new style by using child theme, because this one was missing from min file.

[Tom]

What happens if you remove it completely from your child theme and the minified/non-minified file?

I ask because of the topic I have going on over here: https://github.com/nathansmith/unsemantic/issues/84

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nina]

Hi Tom,

I removed this

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

from both minified/non-minified file and also removed my child theme override style. And It’s not working. I’m not entirely sure what is still needed for Window Phone, because with Android and IOS it works perfectly. It’s funny that Windows Phone won’t take the device width if that’s not defined in style

[Nina]

Hi Tom,

I’m not saying that this is the only and right solution

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

and it’s not, but for now it’s the only one to make website take full width.

[Nina]

Hi Tom,

Sorry, I’m pain in the ass, but…

Liked this part in this article that I found:

Internet Explorer Implementation
The implementation in Internet Explorer 10 is practically identical to the W3C standard (great job IE team), with the addition of a prefix to signify that it’s an experimental implementation (as all prefixed implementations are). The ie viewport value appears as follows:

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

IEs implementation currently only supports the width and height properties. Min and max height/width are not implemented and neither are zoom or orientation. As with all early implementation of standards, if the specification changes, I have no doubt that the internet explorer team with update the implementation to match the standard.

[Nina]

Hi (again) Tom,

I think this is worth to read and check those examples:

https://www.epinova.no/blog/george-gooding/dates/2014/10/surveying-the-viewport/

[Tom]

Okay, we’re getting closer – looks like I can add it without the media query.

Will make this change 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nina]

Hi Tom,

I also tried this one

@-ms-viewport {
    width: auto;
}

I think it works better than device-width? I noticed that with device-width and depending your mobile screen size if you lift it to landscape it will break the responsive mobile menu and grid a little bit.

[Tom]

Okay, I’ve made the adjustment to the next version – I removed the media query and used device-width 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts