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
Related
The problem is happening on Chrome/Android and possibly Chrome on other mobile devices. I have only been able to test it on a Nexus 5x so far. I am using Handlebars.js to dynamically display quotes inside paragraph tags. Whenever the displayed quote is less than three lines, the font-size shrinks. I am having a difficult time debugging this font sizing issue because it only seems to be happening on Chrome for Mobile. The issue does not replicate in Chrome dev tools responsive mode. The font resizing does not happen in IOS Safari or Firefox Mobile.
If you have Chrome on a mobile device would you please have a run through of the game and see if you notice the issue? LINK HERE
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
Here is the code for that section of the site (link to repository):
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p {
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
<div id="game-screen">
<div id="game-pictures">
</div>
<div id="game-quotes">
<h6 class="center">Quote {{counter}}/10</h6>
<p>"{{content}}"</p>
</div>
</div>
Does anyone have an idea of what might be causing this font-resizing?
Thanks in advance if you can offer any help.
Link to Repository
Edit: Thanks to all of you who helped me!
For cross compatibility for my web pages I tend to use the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This seems to work with no additional styling with CSS needed for the mobile platforms. Not sure if it what you want though.
Can you check if your Chrome font size is at 100% in settings on your phone? Chrome for Android has an option to render font at a different value. You can find this option in: Menu -> Settings -> Accessibility. I did a mistake like this some weeks ago and I want to be sure that is not the case here. Sorry if I'm out of the line here.
I also found that for some unknown reason sometimes Chrome for Android set this font setting wrong at installation time. I could not replicate this behavior but I got one phone, of a relative, with this so it might be possible that you are not aware of the fact that this setting is not set at 100%.
i added a * after your paragraph selector to selects all the paragraph's. maybe this will solve your problem. please tell me if it worked, i wanna know the outcome :)
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p *{
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
I'm not sure if this is the answer to your question but I find this consistent for CSS:
body {
/** Setting the 'font-size' property of the <body> to 62.5%
* allows you to use the 'em' measurement as you would in 'px' form.
* ...hope that's clear.
*/
font-size: 62.5%;
}
#someDivInBody {
font-size: 1.65em; /* or '16.5px' by CSS */
}
This method has allows me to use the em measurement as I would in px but with more consistency and control.
The rem unit is unlike px or em.
When you resize the window, using rem will keep the ratio of the text and the window size the same.
Try using em or px to resolve the issue :)
This may be because of the resolution of the phone or tablet. It may be best to customize your webpage to stay the same size, no matter the device.
try using max-width:Resolution;
You will have to apply this to the body class for this to apply to everything.
I.E.
`.body {`<br>
` max-width: 3840px;` /*4K resolution, for 4K displays*/
This SHOULD fix the text issue. If not, please refer to https://www.w3schools.com or https://developer.mozilla.org/en-US/. it may be able to help you.
I have experienced this same issue and it's very annoying. I filed a bug for Chrome (see details here: https://bugs.chromium.org/p/chromium/issues/detail?id=877833#c9) and they basically said it wasn't worth it to them to fix it. In my case, as suggested by #Cheesy, my android's accessiblity was set to larger than standard font size. That does not invalidate the issue, IMO. If large font size makes ALL font larger great. But it should not inconsistently be resizing font in some places on the page while ignoring others.
The only way to fix this for my React application was using this CSS rule:
* {
max-height: 999999px;
}
I have no idea why this works.
It was an extremely specific issue that I had with my Samsung Note 8 and nothing else worked.
I also tried different meta tags combinations and all possible text-size-adjust values, nothing worked but this.
Hopes this helps someone from diving into this rabbit hole that I just came out of.
For me, I had to include minimum-scale in the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
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
After searching through related questions, I'm still unable to get media queries to work for my site (in progress):
http://codemusings.net/
I first ensured that my site validates as valid HTML5. I'm also using the <meta> tag with name="viewport":
<meta name="viewport" content="width=device-width,initial-scale=1">
Using help from related questions here, I went to http://mediaqueriestest.com/, which reports my Samsung Galaxy S4 as having a device-width of 640px.
I'm using a separate style sheet in which to overwrite style rules in the main style sheet.
<link rel='stylesheet' type='text/css' href='style/main.css'>
<link rel='stylesheet' type='text/css' href='style/mobile.css' media='only screen and (device-width: 640px)'>
Inside mobile.css:
nav {
float: none;
width: 50%;
}
main {
float: none;
width: 90%;
}
.section {
background: none;
}
To ensure that the problem wasn't with clients fetching the style sheets in the wrong order, I tried appending a media query to my main CSS style sheet:
#media screen only and (device-width: 640px) {
html { color: red; }
}
However, this didn't work either. I've been specifying device-width: 640px in an attempt to just ensure my mobile CSS works right, but my overall goal is to reliably load different CSS for all smart phones and tablets.
I should also note I'm using Chrome on my Galaxy S4.
try with i think this should work
#media only screen and (max-device-width: 640px) {
html { color: red; }
}
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
I'm having trouble displaying high dpi images in an Android WebView.
Firstly, I'm using this directive in my HTML:
<meta name="viewport" content="width=device-width" />
Background images are being specified as follows in my CSS:
.button {
width: 100px;
height: 50px;
/* button.png is really 200x100 */
background: url('../img/button.png') no-repeat 50% 50%;
background-size: contain;
}
On Chrome for Android, this image appears very crisp. However in a WebView the image is blurry - as though it was 72dpi being upscaled.
Oddly, if I specify:
<meta name='viewport' content='target-densitydpi=device-dpi'>
then the image appears crisp, albeit the rest of the page is at half resolution too.
I've added things like android:hardwareAccelerated="true" and android:anyDensity="true" to my AndroidManifest.xml but none seem to make any difference.
Has anyone got any ideas?
Try this,
img{
image-rendering: optimizeQuality;
}
Force the hardware acceleration in css will give you a 'clear' image.
-webkit-transform: translate3d(0,0,0);
Try to add:
image-rendering: -webkit-optimize-contrast;
More info https://css-tricks.com/almanac/properties/i/image-rendering/