Develop Reference

Font size display issue on Google Chrome for Android

I have a webpage where the font-size of body 16px.
On Google Chrome for Android, I have the following problem: When the page initially loads, the font size in elements which don't have a font-size defined (and therefore inherit the font-size from the body) is bigger than 16px (as you will see if you read on, there is no obvious way to calculate the multiple to which the size of the rendered text is bigger). When the user scrolls down the rendered text size changes to 16px.
See the two images below for a visualisation
In the above screenshot the page has loaded and the user has not interacted with the page.
In the above screenshot the page has loaded and the user has interacted with the page. Notice how the font size on the element showing "0% interest" is now smaller
When the text is larger and smaller - both sizes compute as 16px
Despite the fact that there is a visual difference between the two font-sizes. Before the user scrolls and the text is larger and after the user scrolls and the text size is smaller — the font-size in all cases computes as 16px.
In the above image we can see that the font-size is in both cases 16px but that the two rendered texts are clearly different in size
What happens if the size is changed?
If I change the of the text, the rendered text size increases or decreases (depending on whether or not the number is greater or less than 16). In both cases though the text size increases in proportion to the original text size.
It seems like the browser is showing 16px as a certain size and that it then changes this size when the user scrolls.
Here I've increased the font-size to 20px. Whilst the font size does increase, it increases in proportion to the original rendered text size
Could Javascript be responsible this?
I don't think so. I have disabled javascript in the browser and reloaded the page and the problem still persists.
Does anyone have an idea about what might be causing this?

There are two solutions around:
As described here Chrome on android resizes font the issue occurs if any text reach a certain length.
Add "max-height: 999999px;" to the element which is surrounding the text.
<meta name="viewport" content="width=device-width, initial-scale=1">
For me solution no 1 worked.

There is so-called font size "adjusting". Try to disable it:
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
See details: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Chrome on Android 100% height and width more than viewport?

I am having a problem with Chrome on android mobile phones where an element on my webpage that is 100% width and height is going beyond the viewport?
It seems to work no problem on Android Browser, Firefox for Android, Chrome, Firefox and IE on desktop.
Link to my website: https://www.codesmite.com
If you shrink the page to a mobile size you will see the sidebar menu hides away off screen and a menu button appears to bring it back. When you click the menu button the sidebar transitions across to 100% width and height and the content transitions off the screen to the right. I have overflow:hidden so the content should not be stretching it wrapper but instead leaving the viewport, which works.
For some reason on Chrome for Android the 100% height of the element reaches all the way to the bottom of the page (It isn't fixed anymore, if you scroll down the menu items disappear). The width also stretches beyond the viewport width to the edge of all the overflowing content?
I can't work out what is causing this?

On your <div id='content'> you have
#media only screen and (max-width: 749px), screen and (max-height: 549px)
global.min.css:1#header:target~#content {
left: 100%;
Delete left: 100%; and will work;
Or add CSS: div#content{display:none;} when you open menu, both works for me.

Is it possible to set image for the "over scrolled" (bounced) area of a web page (for mobile)?

Most mobile browser will have a default behavior to allow the users to continue scrolling when they reach the top or bottom of a page, leaving a white space on the top or bottom of the page. And then the whole page will bounce back to fill the white space. In native iOS applications, we can easily set images and even interactive elements for these top and bottom areas. I wonder if this can be done for pure web applications.
What I tried is to set background image of html,body, for example:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately this didn't work because it seems the enter body was being over scrolled. I wonder if there is a special property we can set for the top and bottom empty over scroll areas for mobile websites.
I also have tried:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
This apparently didn't work either.

I believe that this depends solely on the browser as I do not know of any html elements that specify white spaces resulting from over scrolling.
Personally I never experienced any thing like this in windows, chrome, and android.
You might be able to create an animation that happens when the scrolling reaches the bottom or the footer of the page, but I do not think anything can be done to fill in the white space. It is mostly likely browser based.

How to make inline-block in Chrome for Android work properly?

I'm trying to set up a page that looks good in Chrome for Android as well as in desktop Chrome.
I've got it working well in desktop Chrome, as per this screen shot:
.
The two "Answer Choice" lines, including the red "X" buttons, are in a div (called answers). The green "+" button is in the layout after the answers div. I've applied display: inline-block to the answers div, and as you can see, it's working as expected.
However, when I try to do this in Chrome for Android, the inline-block style doesn't seem to be working properly:
I can confirm that the style is being applied (I can use the remote inspector). If I remove the style, the green "+" button moves up a few pixels, showing that it is doing something, just not what I want.
How can I force Chrome on Android to respect the inline-block style?
EDIT: Here's the CSS applicable to the div containing all the answer choices:
.answers {
display: inline-block;
margin-bottom: 5px
}

I had the same issue, and found the solution on another question about div's and inline-block style. It's because of the way white-space collapses in html. You need to change your html so that the first button's close tag has no space between the second button's open tag.
<button class="button1">1
</button><button class="button2">2
</button>
See inline-block elements are line breaking for seemingly no reason?

I've experienced inline-block behaving inconsistently on Android as well. While I haven't been able to track down exactly what's going on, in many cases you can get away with using display: inline, which renders consistently.
Of course, you cannot use margin on inline elements. To address the vertical positioning, you can use vertical-align: middle.

Try to add "!important" to the "display: inline-block;"-attribute. Then it should look like this:
display: inline-block !important;

phone gap screen images doesn't fit the screen

android app with phone gap but the images in the html pages are bigger then the android screen. can u provide me the solution how the icons in the html page will be re sized as per the screen.
Please find the code attached. how to reset the images to fit to screen.
you can download android source code here
https://rapidshare.com/files/422996060/PhoneGap.zip

I noticed that you're specifying an absolute width in your code. If you want to just leave it up to the browser to determine the width, you could do something like this fiddle.
<img src="someImage.jpg" width="100%">
Change the size of the 'result' window and you will see that the images expand and contract to fit the page.
If you need to have exact widths in your phonegap application, you could use this plugin for Android.

you can even do that with:
img {
height:100%;
width:100%;
}