Windows Phone scale issue

This topic has 46 replies, 3 voices, and was last updated 7 years, 5 months ago by Tom.

Viewing 15 posts - 16 through 30 (of 47 total)

← 1 2 3 4 →

Author

Posts
October 13, 2015 at 12:23 am #143864

Nina

Hi Tom,

Haven’t yet solved this issue. I’ll try my best to resolve this. I would be thankful if you can help me with this? Maybe you can try this one to test your own page with WP https://www.browserstack.com
If you can fix this then we don’t have to fork this repo and maybe prevent more issues in the future when updating theme. Here’s something that I found when googled:
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
https://web3canvas.com/simple-solution-for-device-width-issue-in-windows-8-mobile/

October 13, 2015 at 12:30 am #143865

RAJEEV

Hi Tom

a newbie here,i am facing problems with the sticky and slideout menu ,it appears on some of the posts but not on homepage or search page Link weird thing is i have same configuration(Menu plus) on other website and that works fine

October 13, 2015 at 10:33 am #143998

Tom
Lead Developer
Lead Developer

Hi Nina,

Did you try what I suggested here?: https://generatepress.com/forums/topic/windows-phone-scale-issue/#post-141185

RAJEEV – can you possibly start a new topic and I’ll help out?

Thanks!

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

October 13, 2015 at 11:40 pm #144187

Nina

Hi Tom,

I tried your suggestion, but unfortunately it didn’t do the magic.

October 14, 2015 at 10:22 am #144311

Tom
Lead Developer
Lead Developer

Hmm, ok, next thing to try.

Try installing and activating this plugin: https://wordpress.org/plugins/generate-disable-mobile/

Any difference?

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

October 15, 2015 at 1:17 am #144515

Nina

Hi Tom,

This plugin actually disabled all mobile functionality and usability is same as in desktop view. I’m not sure if this fixes the current problem 🙂

October 15, 2015 at 5:25 am #144556
Nina
Hi Tom,

I made these changes:

unsemantic-grid.css
Replaced this code..
```
@media (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}
```
with..
```
@-ms-viewport {
  width:device-width
}
```
and in header.php
added this line in <head>
<meta name="viewport" content="width=device-width">

it seems to work fine right now. Tested it with Windows Phone, Adroid, IOS, IE, Mozilla, Chrome.. Can you try these changes?
October 15, 2015 at 10:35 am #144633

Tom
Lead Developer
Lead Developer

Interesting – what happens if you use this in header.php?

<meta name="viewport" content="width=device-width, initial-scale=1">

That’s what comes with the default theme – the only different is the initial-scale.

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

October 15, 2015 at 11:22 pm #144764

Nina

Hi Tom,

it seems to work. How come there wasn’t viewport defined inside <head>? Can you update this line in your theme: <meta name="viewport" content="width=device-width, initial-scale=1"> ?

October 15, 2015 at 11:30 pm #144768
Nina
Hi again Tom,

and I recommend to use this style with responsive meta tag (https://css-tricks.com/snippets/html/responsive-meta-tag/)
```
@-ms-viewport {
  width:device-width
}
```
http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
October 15, 2015 at 11:42 pm #144770
Tom
Lead Developer
Lead Developer
That meta tag is already included with the theme.

What I didn’t realize is this CSS was stripped from the minified version of the unsemantic-grid.css file, which is what is being served.
```
@media (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}
```
Can you try adding the above to your child theme CSS and see if it works? I would prefer using the above as it’s the default with the framework.

This was just a case of it being missing from the CSS file that’s being served.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development
October 16, 2015 at 12:14 am #144781
Nina
Hi Tom,

I doesn’t work with
```
@media (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}
```
but works fine with
```
@-ms-viewport {
  width:device-width
}
```
October 16, 2015 at 1:20 am #144787
Nina
Hi Tom,

Problem is that I have to remove whole this whole block
```
@media (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}
```
and replace it with this
```
@-ms-viewport {
  width:device-width
}
```
But with child theme you are supposed to override parent styles and I cannot remove that one.
This one won’t work
```
@media (max-width: 400px) {
    @-ms-viewport {
        width: device-width;
    }
}
```
October 16, 2015 at 9:44 am #144881

Tom
Lead Developer
Lead Developer

I’ve asked the creator of the grid system if making this change makes sense to them – if so, I’ll be implementing it in the next update 🙂

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

October 19, 2015 at 12:08 am #145563

Nina

Hi Tom,

Thank you very much, be in touch! 🙂
Author

Posts

Viewing 15 posts - 16 through 30 (of 47 total)

← 1 2 3 4 →

You must be logged in to reply to this topic.

[Resolved] Windows Phone scale issue

Popular Articles

Start building better websites today.