Does anybody know whether PhoneGap's Android browser supports CSS3 flex box?
When I run the code in browser it worked correctly but when it comes to my Android device it does not work.
Here is the code:
.di {
float:left;
width:100%;
text-align:left;
display:flex;
}
.di span {
background:url('img/smallphone.png') no-repeat;
height:15px;
border:1px solid #005522;
float:left;
width:24.2%;
text-align:center;
border-radius: 10px;
background-color:white;
flex:1
}
Actually, phonegap does not support any css.
Phonegap uses a webview, which means it uses the default browser of the device.
So the css support depends on the browser of the device, which means you will have different css behaviour with the same app if you run it on an android 2.3, 4.0, 4.1 or 4.4.
And sometimes the support may be different for a given version of android if you use different brand of device.
That's the main problem with phonegap.
That said, it seems flex box are supported since android 2.1 : http://caniuse.com/#feat=flexbox but you need to add the prefix -webkit
try this :
.di {
float:left;
width:100%;
text-align:left;
display: -webkit-flex;
display:flex;
}
.di span {
background:url('img/smallphone.png') no-repeat;
height:15px;
border:1px solid #005522;
float:left;
width:24.2%;
text-align:center;
border-radius: 10px;
background-color:white;
-webkit-flex: 1;
flex:1;
}
Related
I have scoured the web for simple ways to make a progress bar on a website that is consistent across all browsers. I have achieved this for PCs by using elements instead of the progress element and thought all was well until I looked at the website on my android phone using chrome browser app.
It would appear that Chrome for Android does not support this code?!
Can someone point me in the right direction to get this to appear correctly?
#percent {
background-color: black;
border-radius: 10px;
padding: 3px;
color: yellow;
height: 38px;
}
#inner {
background-color: white;
border-radius: 8px;
height: 100%;
width: 100%;
float: right;
}
#bar {
background-color: cyan;
border-radius: 8px;
text-align: center;
line-height: 38px;
color: blue;
height: 100%;
float: left;
}
<br><br><br>
<div id='percent'>
<div id='inner'>
<div style='width: 63%;' id='bar'><b>63% Full (1354.3 GiB Free)</b></div>
</div>
</div>
I tested the code using the (desktop) chrome device emulator and it runs fine on all sorts of devices. This does, however, not emulate the chrome app for android or IOS, but the aspect ratio of the device does not influence if the nested <div> renders or not.
I hope this gives you some insight into your problem.
P.S. Did you check if your chrome version is up-to-date? It might run an outdated version of html/css
I've written a new post to my blog and the page looks fine in all browsers, except Chrome for Android 4.4.4 (KitKat). Update: didn't work for Android Marshmallow too.
The only different thing this particular post has is a scrollable table, styled on a custom stylesheet:
.article_body table {
width: 100%;
}
#media screen and (max-width: 479px) {
.article_body table {
width: auto;
display: block;
overflow: auto;
overflow-x: scroll;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
clear: both;
-webkit-overflow-scrolling:touch;
touch-action: auto;
-ms-touch-action: auto;
}
}
The table is scrollable in all browsers, except Chrome on Android. But the most important thing is that the post is showing a white block from some point on, until the end of the post, as shown on the screenshots below:
Beginning of the error
End of the error:
TESTS:
PC, Win 7 (IE 11, Chrome, Firefox) - OK
iPhone, iOS 9.3.1 (Chrome and Safari) - OK
Windows Phone (IE) - OK
Moto G - Mozilla Firefox - OK
Moto G - Google Chrome - failed (portrait only)
All the other posts within my blog are ok on all these browsers.
CSS test:
After some tests I've found out the error relies on display:block;.
If I change or remove this property, the white block disappears on Chrome, but the layout is awful in all other browsers.
What should I do to fix this?!
Blog post: http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html
Android version: Android 4.4.4; XT1032 Build/KXB21.14-L1.40
Chrome: 49.0.2623.105
I found the problem for the white area. It lies in the animate.css Change the following line;
<div class="header-color col-sm-9 col-sm-offset-3 animated fadeIn">
Into this:
<div class="header-color col-sm-9 col-sm-offset-3">
I suspect that the transition (fadein), which has a 2000px value in it, is the one causing the problem with the white space/cut off.
You can probably also multiply this value by 10 to solve this problem.
Well, thanks to #JoostS insights I managed to fix this annoying error myself with this #media query for Chrome only:
/* #media queries for Chrome 29+ only */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) and (max-width: 479px) {
.fadeIn {
display: initial;
margin-left: 5% !important;
}
article {
padding-left: 5%;
padding-right: 5%;
}
}
See https://gitlab.com/snippets/17238 for more Chrome media queries.
I have a mobile site with fancybox popups
I'm having problems with close button:
<a title="Close" class="fancybox-item fancybox-close" href="javascript:void(0);" id="fancyboxCloseButton"><i class="icon-remove"></i></a>
On Nexus 7 tablet with Android 4.4.4 I see the close button (X) with green color:
.fancybox-close {
position: absolute;
top: .5%;
right: 2%;
display: block;
cursor: pointer;
z-index: 8040;
background: none!important;
font-size: 150%;
color: #afd732!important;
text-decoration: none;
}
But on Samsung tablet with Android 3.1 I see green holo square.
Since it impossible to debug Android 3.1 browser.
Any ideas what it can be?
It was a font issue. Android none Chrome browser doesn't support .woff font.
I added svg font and that solved the problem.
The fancybox works fine in Android browser.
I've made a site where all texts are for some pixels up in android tablet and mobile compared with desktop.
Would like to copy a small example.
Here's my html code:
<body>
<h3>MAKING OF</h3>
</body>
Here's the css code:
body {
text-align: center;
padding-top: 50px;
}
html {
font-size: 62.5%;
}
#font-face {
font-family: MPL;
src: local("MPL"),
url(fonts/MPL.ttf),
url(fonts/MPL.eot);
}
h3 {
font-family: MPL;
font-size: 30px;
font-size: 3rem;
height: 60px;
line-height: 60px;
padding: 0px 12px;
background-color: #5496F2;
color: #000;
}
May anyone know the reason why the text is not properly aligned on tablet.
Here's the screenshot of the right alignment on desktop browser
And here's the screenshot of the issue on tablet browser
On desktop this is working properly both in FF and Chrome, but on android tablet it's wrong aligned as on Chrome as on FF browsers, also it's not properly working on ios Safari browser. Here's the link:
http://inants.com/kadmos/web/kad/a/a
Hope someone will help to understand this issue and will suggest the best solution.
Thanks.
Have faced a similar issue. Looks to be the custom-font that's causing the issue. Try replacing the custom-font with something generic such as Sans-serif.
Not yet sure how to resolve the issue by using the same custom-font that's causing the issue.
Have you tried actually using the "vertical-align" css property? Try this.
Is there a known issue using % values in border radius on Android browsers?
I notice that when I use:
.element {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
The border radius seems to work on all mobile browsers, but when I use:
.element {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
The border radius does not apply on Android browsers.
Yes there is: check here, and click on known issues.
Here's what it says:
1. Android Browser 2.3 does not support % value for border-radius.
2. Border-radius does not work on fieldset elements in IE9.
3. The stock browser on the Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property but does support the long-hand properties for each corner like "border-top-left-radius".
What are you using the percentage value for? Please tell us, so we can further help you.
Now, since you are using it to make circles, there's a dirty hack you can use:
#circle {
border-radius: 9999px; /* makes it a circle */
}
That should work fine.