I have an android app which runs on tablet and phone. My content is loading html files from the assets folder. My problem is I want different image sizes on tablet and phone.
here is the code for the image on phone.
<img src="check_yes_tick_parent.png" width="8%"/>
However this is too wide on tablet and ideally I would like the width to be 3%.
I know I could make two html files for each one. i.e one for phone and one for tablet. But is there an easier way?
You can use css and media query for this then you don't need to have 2 or more html file.
For example:
At html:
<div id="image"></div>
At css:
#media screen and (min-width: 1024px) {
width: 100px;
height: 100px;
background-image: url(check_yes_tick_parent.png);
}
#media screen and (width: 768px) and (height: 1004px) {
width: 50px;
height: 50px;
background-image: url(check_yes_tick_parent_for_pad.png);
}
You can refer to CSS3 #media Rule
Related
I find Android's web view behaviour strange when handling with css properties:
When displaying a web page that contains the following css properties: font-size and line-heightset to:
font-size: 20px;
line-height: 35px;
Android's webview changes the properties to:
font-size: 17.4px;
line-height: 30.45px;
Why?
I found answer:
Just webView must be to set text size to "NORMAL" in android. Like this:
webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL);
Did you check page behavior in different resolutions? There might be defined #media rules in CSS, which change the style for different resolutions, for example:
#media screen and (min-width: 1024px) {
p {
font-size:20px;
line-height:35px
}
}
#media screen and (max-width: 1023px) {
p {
font-size:17.4px;
line-height:30.45px
}
}
Read more here.
I found how to force the horizontal orientation under a certain resolution, and on android work fine, unfortunately it also rotates on the desktop when the window falls within the specific resolution.
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
I'm also looking for a way to send mobile phone users to another page where to use this system, but it's also based on the resolution of the device:
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
How can i get forced horizontal orientation only on android and ios (i'm especially for Android)?
or
How can i send these users to another page with forced orientation?
Thanks!
I am trying to develop a responsive site.
I've been testing several #media on my PC and so far so good.
The problem started wen I passed to my Android Smartphone.
For some reason, the site is presented as it should be in Landscape orientation, but in Portrait orientation a blank page is presented.
I have tested in Firefox and Chrome and the problem is the same.
I do have noticed that if I chose the "reader view" the content of the page can be read, so the page is being loaded, plus, I installed a HTML source code viewer and the page is fully loaded.
I have tested on two different Android Smartphones, with the same resolution: 540 x 960 px
You can find the page here:
http://www.chazard.eu/teste/cspreguengogrande
and here is my css:
#charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
html,
body{
min-height:100%;
width:100%;
z-index:-10;
}
#Background{
position:absolute;
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
display:block;
z-index:1;
}
#Background_Left{
float:left;
width:50%;
height:100%;
background:url(images/background_left.jpg) fixed;
background-repeat:no-repeat;
background-position:left;
background-size:contain;
}
#Background_Right{
float:right;
width:50%;
height:100%;
background:url(images/background_right.jpg) fixed;
background-repeat:no-repeat;
background-position:right;
background-size:contain;
}
#mainDIV{
position:relative;
margin: 0 auto;
width:1000px;
min-height:100%;
z-index:10;
}
#BotoesContainer{
position:relative;
height:200px;
background:url(images/banner.png);
background-repeat:no-repeat;
background-size:contain;
}
#ConteudoContainer{
position:relative;
padding-bottom:70px;
}
/* --------------------------------------------------
Smartphone / Tablet View Port < 960 px width Horizontal
--------------------------------------------------*/
#media (max-device-width: 960px) and (orientation: landscape){
#mainDIV{
width:600px;
}
}
/* --------------------------------------------------
Smartphone / Tablet View Port < 540 px width Horizontal
--------------------------------------------------*/
#media (max-device-width: 540px) and (orientation: portrait){
#mainDIV{
width:520px;
}
#Background{
display:none;
}
}
I have removed some non-essencial css.
Any advise?
Use max-width instead of max-device-width. Also, you need to probably use the media query with max-width: 980px, if its a desktop site.
Reason:
max-width refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height.
max-device-width refers to the viewport size of the device regardless of orientation, current scale or resizing.
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>
I have noticed that JQuery Mobile in phonegap is working fine for iphone . But when I run similar application on android especially Ldpi(320X240) it is not working properly.Images such as buttons are pixeleted. Any help on this is highly apperciated.
Thanks in adv
In android apps you can provide multiple bitmaps for each screen density in res/drawable-ldpi res/drawable-hdpi, etc...
But it won't work here, because phonegap will load bitmap from asset folder. But you can do exactly as android does in your webpage using css3 media queries.
exemple:
for a 100px image name it btn-mdpi.png,
create a 75px image naming it btn-ldpi.png,
create a 150px image naming it btn-hdpi.png,
then create a 200px image naming it btn-xhdpi.png
here is the <head> of your webpage:
<head>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
<style>
input {
background: transparent url(btn-mdpi.png);
height: 100px;
}
#media screen and (-webkit-max-device-pixel-ratio:0.75) {
input {
background: transparent url(assets/btn-ldpi.png);
height: 75px;
}
}
#media screen and (-webkit-max-device-pixel-ratio:1.0) {
input {
background: transparent url(assets/btn-mdpi.png);
height: 100px;
}
}
#media screen and (-webkit-max-device-pixel-ratio:1.5) {
input {
background: transparent url(assets/btn-hdpi.png);
height: 150px;
}
}
#media screen and (-webkit-max-device-pixel-ratio:2.0) {
input {
background: transparent url(assets/btn-xhpi.png);
height: 200px;
}
}
</style>
</head>
For each density, a different bitmap will be used matching the screen density. And good news it will also work for iphone 4+ and its retina display!
You can read this old romain nurik post to learn more about it: http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui