I'm currently working on a Phonegap app and I have the following problem when testing it with Windows Phone 8 (left screenshot below): the application bar is not removed and leaves a big white space.
From various sources I learned that the following meta tag is ignored by WP8:
<meta name="viewport" content="width=device-width, height=device-height">
So you have to define it again using the "ms" pre-tag:
#-ms-viewport {
height: device-height;
width: device-width;
}
But doing so kind of messes up with the scaling of the app. Any idea what is going on?
Here the before after screenshot:
Include this in Index.html,
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
Include this in CSS:
#viewport
{
width:320px;
}
#-ms-viewport {
width:320px;
zoom-user:fixed;
max-zoom:1;
min-zoom:1;
}
and include also this,
body, html {
-ms-overflow-style: none !important;
}
This will solve the issue for now, it worked for me in the same situation..!!
:-)
You can take this code to your css:
* {
zoom:1;
-ms-content-zooming:none;
}
This solved the problem for me.
There is a plugin available for the viewport fix:
http://plugreg.com/plugin/lisovin/cordova-wp8-viewport
Related
I have been looking into this issue and found no solution at all. Not even background color in Gmail (website from desktop) and in Gmail app. I have tried the following things.
add viewport
add screen key like this #media screen and (max-width) {}. event with 'only' keyword
I have seen the links (i.e; https://www.caniemail.com/search/?s=media) which show Gmail support only a few properties. but those properties also not working.
So I need to know whether we can use media queries or not? So I can stop using it if it won't work.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>
<%=content_for(:title) %>
</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
#media screen and (max-width: 400px) {
#root, .upper-bar {
padding: 0 !important;
}
#child-cont {
border: none !important;
}
.upper-bar .slogan-text-cont {
text-align: center !important;
}
.pre-footer-section .steps-icon-cont {
width: 100% !important;
}
}
</style>
Found the problem that, Gmail, Outlook, and similar mail provider, has some limitations on how much CSS you can add. After that particular limit, your CSS won't work at all. So you have removed some CSS. So I did remove some CSS and automatically all my CSS and media queries start working. Unfortunately, I cannot find out any specific limit in any article for these mail providers.
I found myself that the Gmail CSS limit is more than outlook. Because when Gmail shows proper styling and sends the same mail to outlook, it didn't work for it. So, I further reduce the styling content, then CSS worked for both Gmail and Outlook.
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
Do anyone know how the css work on mobile? I tried to declare any statement below one by one but no luck.
#font-size-base: 20px;
body {
-webkit-text-size-adjust: 100%;
}
Refer to the image I attached, the font-size was redeclared 2 times from html {10px} to body {16px} and then to p {16px}, but finally it was changed to 28.8px, it is very large on mobile.
In the head, I do declare the meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
I can't find which statement change the font-size to 28.8px. Please help.
My actual iPhone was displaying a super-small font-size for part of my web-site.
I found that the following solved it:
<meta name="viewport" content="width=device-width, initial-scale=1">
and
body {
-webkit-text-size-adjust: 100%;
}
I do not understand why these work ... any clues?
Appreciate the help in advance.
This is the website: http://www.muddlingthru.ca/. We have ruled out the usual horizontal scroll-bar suspects.
Add meta tags.
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
Use the Bootstrap div.container > div.row > div.col-md-* structure.
Check for conflicting width/margin/padding/border settings in our CSS.
No luck.
We have also isolated when the problem happens:
only if we rotate from portrait to landscape on WinPhone8
not if we start in landscape on page load
not if we do a page refresh after the problem happens
not if we rotate using web developer tools in FireFox
If you have any ideas why this happens and how to fix it, please let us know.
Are you applying the WP8 IE10 viewport fix recommended on http://getbootstrap.com/getting-started/#support-ie10-width ?
CSS:
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
JS:
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style');
msViewportStyle.appendChild(document.createTextNode('#-ms-viewport{width:auto!important}'));
document.querySelector('head').appendChild(msViewportStyle);
}