Archived topic
Windows Phone scale issue
46 replies · Started by Anonymous on September 29, 2015
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/
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
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!
Hi Tom,
I tried your suggestion, but unfortunately it didn't do the magic.
Hmm, ok, next thing to try.
Try installing and activating this plugin: https://wordpress.org/plugins/generate-disable-mobile/
Any difference?
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 :)
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?
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.
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"> ?
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/
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 :)
Hi Tom,
I doesn't work with
@media (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}but works fine with
@-ms-viewport {
width:device-width
}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;
}
}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 :)
Hi Tom,
Thank you very much, be in touch! :)