I can't seem to get my font-size rule work in Android's default browser. And I've tried everything: 2 dozen of #media rules, HTML viewport tags, !important statements, what not. The Android browser simply just displays all the text in a fixed size. Other browsers work fine. What could be a reason for this?
Related
When a div reaches the length of about 140-150 chars then the div's font size can surprisingly change. I've created a sample - if you open it in an Android version of Chrome or Firefox, you'll see the issue. (It work well in Safari and Opera)
Please note that the JS code only add characters to the page and doesn't change font sizes!
Animated sample: https://ferenk.dev/share/samples/buggy_divs.html
Static samples (compare the look and the HTML of the first and the second page): https://ferenk.dev/share/samples/buggy_divs_simple_1.html
https://ferenk.dev/share/samples/buggy_divs_simple_2.html
If you put the same text to a textarea then its size will not change.
Notes
There are some workarounds like using display: inline-block, but I need the features of the block display.
You can play with the font size, too, and it sometimes helps. But the issue can reappear after another change in a more complicated layout, and you will not know why.
The trick of <meta name="viewport" content="width=device-width, initial-scale=1"> suggested for another similar issue doesn't work either.
I don't know if it's a real browser bug, but it's very strange. My test pages are so simple that they should be rendered correctly. I've never experienced this problem with desktop browsers. And I had some tests with IOS (Chrome, Safari) and it also seemed to be OK.
I hope that this is just a "feature" of the browsers which can be disabled easily.
I'm new to PhoneGap and noticed a problem... When testing my app on a desktop computer, or even if I put the app online and view it in a webpage (I'm on android and tried chrome browser and Samsung browser). It appears the same. However, if I view it with the phonegap app on my phone, the font size if different. Here's a simple example...
body {font:normal 26px arial}
div{width:200px;height:100px;border:1px solid black}
<div>THIS IS A TEST</div>
Notice, the words THIS IS A TEST fit nicely across the div. With phonegap, it doesn't fit. It's enlarging the font. I did some testing and it's not changing the div size, it's definitely a Font issue. I was hoping to have things look the same on desktop and mobile, without having to alter font sizes and detect devices. Any ideas?
I'm trying to create a simlpe responsive layout (JSFiddle) for a web app and struggle with the rendering on mobile webkit browsers.
They shrink some of the floating elements in a (to me) unpredictable way.
Layouts work well with desktop browsers and Firefox and Opera on Android but not with Chrome on Android and seemingly Safari on iOS (tested with Kitkat smartphone and simulated in Chrome for Android and Apple devices):Simulated Nexus 4 Rendering(Text in blue and orange areas should be as big as in the white area)
It seems it doesn't matter which exact CSS attributes I use; I tried CSS tables, boxes, floats, flex-boxes and lastly -webkit-boxes - all with the same result: Too small headers and footers
This is part of a project on Google Script, so unfortunately I am not in control of the viewport meta-tag, but a quick try with a local file and a <meta name="viewport" content="width=device-width, initial-scale=1"> tag didn't solve the issue either.
Has anyone experienced this before and has an idea how to fix it?
Thanks!
It seems this answer by moeffju is relevant to your problem:
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
https://stackoverflow.com/a/12965146/5297207
Using the Chrome emulator and adding this property to the P elements in the white area made the text adhere to the CSS font-size. (It makes the white text small like the blue and orange, not them big. The original sizing is small).
See the comments of the original answer I linked to for an explanation of why this works, and also some warnings about problems that might occur from using this fix. I've used it successfully on a couple of sites but didn't do very thourough testing on Safari.
I created a webpage, that works well with all major browsers. I tested and adopted the website also to mobile browsers. Unfortunately, I didn't test the page when developing on Android browser and didn't know about the problems (Android 4.2).
the following viewport works well with iPhone 5 and mobile browsers like mobile chrome.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimal-ui">
..and I would rather not change that.
I also did some media queries which work well on mobile devices.
#media only screen and (min-width : 150px) and (max-width : 420px)
#media only screen and (min-width : 150px) and (max-width : 980px)
The webpage is wrapped in a container of 977px and I use fonts of 24px and 16px, which both show up much bigger on Android browser (Android 4.2).
Anybody with suggestions how to solve that font problem?
I tried CSS font-size-adjust and text-size-adjust but I am not able to solve hat problem, in contrary I get different output in various browsers.
It sounds like a density issue. Add the target-densitydpi to the viewport tag. Remember this will be used on GB but not greater devices. Check this out http://www.petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/ for more detail.
After a sleepless night I found myself a solution that works.
I put Javascript/JQuery script before the end of the "body" section to reduce the font-size in the android browser to fit in the main navigation bar.
With the first if statement I avoid that the pixel-changes also appear in chrome android browser, the nested if statement targets the android browser.
<script>
if(!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
if (navigator.userAgent.toLowerCase().indexOf('android') > -1) {
$('#mainnav nav ul li a').css('font-size','18px');
}
}
</script>
This script could probably be optimized also for other android browser, since I did not test all.
I am developing a mobile version of my website which I am testing on my Samsung Galaxy S android mobile device running Froyo (2.2).
I would like to , when viewed with the standard internet browser, have a fixed header and a fixed footer ( which are always visible on screen) with the contents of the pages scrollable in between.
I tried all sorts of combinations with padding of body and the sorts (which seem to work when viewed on a browser on the pc), but can't seem to find a solution.
Can anybody help here ?
Note: if I try something like this :
<div id="header" style="position:absolute; top:0px; left:0px;height:200px;overflow:hidden;"></div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px;overflow:auto;"></div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px;overflow:hidden;"></div>
Both the header and footer are fixed but the content is not scrollable , e.g. it also appears fixed .
It might be the browser of the Android Froyo 2.2 of course.
Anyone ?
It seems that position:fixed is only partially supported in Android 2.2+, if you also add a particular meta tag. You should also note it's not supported at all under iOS. There are scripts to emulate the behavior, though(which I don't have right at hand.)
The following site explains the state of this issue.
http://bradfrostweb.com/blog/mobile/fixed-position/
The author suggests a few JavaScript solutions.
iScroll 4
Scrollability
Sencha Touch
Jquery Mobile
Since you probably only want to build this a single time and would like to support multiple mobile devices transparently, I would suggest you take a look at : JQuery Mobile
Article on page layout
If you are already working with minimal screen space, why would you want a fixed header and footer? Consider that every browser window may not be big enough for it to be practical. What happens when someone views your page in landscape and you have both a fixed header and footer?
Even on the Nexus S, at 800x480, at 100% zoom you will take up half the page in headers and footers and that's in portrait. In landscape, forget about it...
Is there another design that could work well?
What is the use for the links? If they are very important it might make sense to just repeat them another way.