Why do css properties change in android webview - android

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.

Related

Why is paragraph text shrinking in Chrome for Mobile?

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"/>

Different Image widths in Html for Android Tablet and Phone

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

Android ignoring font-size change via media query on HTML

Basically, on a Nexus 7 when the font-size changes on the HTML element it's ignored. If I remove the smaller font size everything works as intended, but this adds it's own issues for phones.
CSS:
html { font-size: 10px; }
#media (min-width: 600px) and (max-aspect-ratio: 21/15), (min-width: 768px) {
html { font-size: 16px; }
}
It works if I remove the first line so the media query isn't the issue. Anyone have any ideas or come across this?
My only theory so far is it might be a bug with WebViews (this is currently in a web view).
I was able to work around this by adding an additional catch-all #media query and not specifying font-size outside of the #media queries.

CSS Media Queries not Working for Android Device

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; }
}

How to let text in Android Webview fit different screen size?

I have an application contains a webview. When I run this application on phones, it works well. However, if I run it on tablet, the text it displayed is a little smaller to show. I hope if anyone has a solution, let the text inside webview will automatic increase or descreas their size to fit different screen. Thank you!
You can control your WebView content by using metadata. Here is reference guide, Targeting Screens from Web Apps!
Use media queries. Change the font size according to the screen width. for instance,
#media (max-width: 1280px) {
html {
font-size: [font size for tablet]
}
}
#media (max-width: 720px) {
html {
font-size: [font size for large mobile]
}
}
#media (max-width: 480px) {
html {
font-size: [font size for smaller mobile]
}
}

Categories

Resources