I'm developing a simple app with Cordova/PhoneGap and using FontAwesome (and border-radius) to display some social media icons. I made the build via cordova android build on the CLI.
The social media icons look neat and crispy on an Android 4.4.2.
But on an Android 4.0.3 tablet, as well as on my colleague Android 2.3.6 smartphone, it looks bad, like in this screenshot (from the tablet).
The border radius is awfully rendered, but the FontAwesome icons also look bad.
Why? Should I avoid using FontAwesome and/or border-radius in Cordova/PhoneGap applications for older Android devices? How could I serve better images on these devices?
What I'm doing right now with other images is using media queries:
#media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5){
#logo-home { width: 32px; height: 32px; background: url('../img/logo-home64x64.png'); background-size: 32px 32px; }
}
You can notice I'm actually loading a 64x64px image and setting it's dimensions to 32x32px. Is that a good practice?
Thank you
UPDATE
Here's a comparison between two PNG screenshots (the one from the link above is a JPEG that might be a bit compressed) from my Android 4.0.3 device (Galaxy Tab GT-P3100):
image 1 - these are FontAwesome icons and border-radius
image 2 - these are PNG images
The PNG icons are a bit smaller and the icons aren't exactly the same, but you can see a drastic difference between them.
Why the border-radius rendering quality is so poor? Regarding the icons, it's actually only the YouTube FontAwesome icon that looks ugly.
CSS for the FontAwesome icons with border-radius:
.social { margin: 0 auto; }
.social .item { margin: 3px; text-align: center; font-size: 24px; cursor: pointer; display: inline-block; width: 44px; height: 44px; background-color: #68a225; color: #fff; border: solid 1px #fff; border-radius: 22px; }
.social .item:hover { background-color: #fff; color: #68a225; border: solid 1px #68a225; margin-top: 0;}
.social .item i { margin-top: 12px; }
You can use Font Awesome's method called "Stacked Icons":
http://fortawesome.github.io/Font-Awesome/examples/ - scroll down to Stacked Icons
Here is a fiddle:
http://jsfiddle.net/0n4ou4y3/
<style type="text/css">
.fa-stack .fa-circle {
color: #68a225;
}
</style>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
Related
I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?
add some line-height with the same value as the font-size and see if it fixe anything.
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.
I am developing an Angular 5 application which is supposed to be used by advertisers to create advertisements to be displayed on a host of different mobile devices. The client is now asking for a preview screen for a 3.5 inch smartphone screen on Android and iOS.
Do you have any ideas how to render real time images just uploaded in a preview mode for both iOS and Android - either as a separate page or as a modal - within a desktop app?
Is there any JavaScript framework that can help with the default screens and layouts for both of these devices?
Anything better than a resized iframe?
Following my comment : I don't have knowledge of a framework that can do that.
But it's pretty easy to mock. All you need is to display a div that has the size of the phone screen you're targeting.
You won't need much code and browser compatibility since you only want to display an image and some text. I'm pretty sure all browsers can handle that.
A quick search for the iPhoneX gave me the dimensions 2.436 x 1.125
Given the size, let's take a third of this : 812 x 375
Now I don't know the buttons on iPhone so I won't display them, but here is a mock of an iPhoneX screen :
#screen {
height: 821px;
width: 375px;
border: 1px solid black;
margin: auto;
}
#img-ad {
height: 80%;
background: teal;
color: rgba(0, 0, 0, 0.54);
display: flex;
align-items: center;
justify-content: center;
font-family: Helvetica;
font-weight: bolder;
font-size: 30px;
}
#txt-ad {
height: 20%;
background: tomato;
color: rgba(0, 0, 0, 0.54);
font-family: Helvetica;
font-weight: bold;
box-sizing: border-box;
padding: 24px;
text-align: center;
}
<div id="screen">
<div id="img-ad"><span>80% of screen</span></div>
<div id="txt-ad">Lorem Ipsum Dolor sit Amet, and I only remember this part</div>
</div>
Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
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 am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.