I've created a simple application using Phonegap for android, that simply loads my website's content. The problem is webview doesn't understand the "REM" css units, even though on the same device when I open the website in chrome browser it works as expected.
The technique I'm using is I set the root font-size in pixels (for example 1px), and everything else using rem units. It looks like when using webview, it has some minimum value for font-size which is far bigger than my value and it multiply all elements sizes by 10-12 times.
Is there a way to fix it without switching to pixels instead of rems?
Code example:
body {
font-size: 1px;
}
.element {
width: 15rem;
}
From the code above, the width of the element should be 15px, which is correct if I open the website in mobile browser, but in webview its bigger than 150px;
UPDATE:
I'm almost sure that it has a minimum font-size issue in webview, because I tried the opposite now, I set the root font-size to 15px and .element width to 1rem and it shows everything correctly, means REM units are working if I set root font-size above the minimum limit in webview.
Here is how my website looks in mobile chrome
[]
Here is phonegap application
Webview increases the minimum font-size by default. This solution works the best for me. Now webview acts like most other browsers with rem units. :)
https://stackoverflow.com/a/41496408/688352
Related
In android application i am opening a web site.
In this website i am using rem as unit for width.
For html tag i have added font-size as 1px.
html{ font-size:1px !important; }
But if i see computed styles,i see font-size as 2.90909px
I have checked whether this css is getting overriden somewhere,but it is not.Attaching the screen-shot for the same.
Please let me know what is the issue and what can be workaround as i want html font size equal to 1px.
please see the highligted part,any known issue ?
You need to go deep, this should do it:
* { font-size: 1px !important; }
Using it on HTML tag will not affect some jQuery Mobile elements, like, for example, buttons.
I am mid-way through re-coding my current site and I have come across a mobile compatibility problem.
If you view the current website via mobile device (here) you can see the width and height of the website is normal sized as it would be when viewing on a desktop with the ability to scroll vertically and horizontally.
However, on my new site (using bootstrap slate from bootswatch - bootswatch.com/slate/) when you preview it on a mobile device it tries to squeeze it all into the fixed mobile device width (here)
I have tried adding the lines below, however I don't see a difference.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
html,
body {
height: 100%;
width: 100%;
}
Is there any way to make the new site to be shown in the same dimension as the current one in mobile devices?
Thanks.
What you see is the responsive behavior of bootstrap I guess. And imho it definitely makes sense to fit the content into the device width on mobile devices.
You can read about disabling the responsive feature in your bootstrap project here: Disabling bootstrap responsiveness
UPDATE:
To make your content horizontally scrollable add:
html, body {
overflow: auto;
}
to your stylesheet.
If this doesn't work try adding !importantto the declaration:
html, body {
overflow: auto !important;
}
NOTE:
This is not the most efficient way css-performance wise, but given your comprehension level of CSS, I guess it would be too much for your to alter the bootstrap.css yourself.
For Bootstrap it self the steps on disabling responsiveness are below. You can download template/CSS with this disabled. Check out http://getbootstrap.com/getting-started/
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
I have an HTML page and a full-screen Android webview. The HTML content is larger than the webview's visible area. I want to fit the HTML content to the width of webview.
What's really important is this: when the device's orientation changes, the webview will not reload, meaning it will just resize and the content would still fit to width.
One more thing: because the content has been scaled down, user can zoom it in to a maximum scale of 100%. When the content is zoomed and orientation changes, I want the content to fit-width again.
Edit 1: I can change meta tags in the head of HTML, but its content remains larger than the webview's visible area. I'm supporting Android 2.3 and later.
Edit 2: Thanks for the suggestion on responsive web design. I know what it is and I can do it. Problem is I cannot change much of the HTML content in this case.
TL;DR: How to always fit a larger HTML content to a Android webview's width as the webview resizes, without reloading the content. (I can change the webview, not much of the HTML.)
do following settings
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setLoadWithOverviewMode(true);
This may sound like a cop-out answer, but I think it depends on how you're building the rest of your site. Whenever I work on responsive sites, I use:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will do two things: width=device-width will find the width of your device, and send styles from your CSS that match that size (you can set styles for specific sizes in your CSS, using media queries). Initial-scale=1 will make the site show up at 100% when it loads, but still give users the option to zoom in.
If your site is developed for a specific width, you could try using:
<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">
This will just scale down your site to fit the device width. Nothing super special here, users will basically just be shown mini-desktop sites.
I'd recommend reading this Webdesign Tuts+ article. They explain the viewport meta tag well, with examples.
You need not change anything on Webview , all u need is Responsive
Html Page, If you are designer then that will solve ur issue or u can
post a part of ur Question with UI tag.
To built Responsive html pages u can visit : HERE
Result : You need to test on webview while creating your responsive
html page, default brower of android itself reflect that ur html page
is responsive or not.Once it will work in default brower in Android
device then it will work in any webview in android.
Testing : you can test ur responsive html page HERE
I would have to see the source of your HTML and CSS. You have to exclusively use % sizes and never use fixed width px sizes. Then, the user can change the size of the browser and it will dynamically resize. I also use % widths because of this. It also dynamically resizes if you use CTRL-MouseWheel (zoom).
Here's a tip for responsive web design, use positions instead of widths:
For example:
html
<div id="somediv">I'm just a div, just a regular div.</div>
css
#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */
right: 0; /*same as above, except on the right */
height: 50px;
width: auto;
}
The div above will automatically resize based on screen width.
I have a webpage which is displayed by Android application via Webview component.
It decides to change the font-size so the text of 16px has font-size=14px (I can see it when I inspect the element with weinre. It has 16px but in computed style it has 14px).
I wouldn't like the Webview to decide what is better at all. So how can I fix the problem?
Remark: In this specific case the change causes the text not to be vertical aligned, because after the change the line-height doesn't adjust the font-size. It is just one of the cases and I would like to stop Webview from changing the css values.
This issue seems to be due to the WebView respecting the system font size setting (which can be altered at: Settings > Display > Font size).
Several bug reports have been submitted in various places (for example)
In order to reproduce the problem you have to scale down the system font size to small or minimum.
...
Okay, I can repro if I change Settings > Display > Font size. It doesn't repro in Chrome, but then Chrome doesn't seem to respect "Font size" in the first place. I'm pretty busy right now, so it may be a while before I can investigate further.
Try setting your system font size to "Small" or "Medium" and test your app.
This issue only affects pages viewed in a webview and not the android browser. It possibly only affects a subset of devices. Has anyone else seen this problem?
I'm seeing my device transform fonts as follows:
16px -> 14px
14px -> 12px
12px -> 10px
I'm trying to force my page to render fonts at 12px across all devices. Here's a potential solution (using jQuery):
$(document).ready(function()
{
//set font-size to 12px
$('html').css('font-size', "12px")
//See what font-size is computed by the webview
var fs = parseFloat($('html').css('font-size'));
//If the webview is being naughty, compensate for it
if (fs == 10)
{
$('html').css('font-size', "14px");
}
}
I encountered the same behavior and solved it by changing TextZoom in the WebView Settings. On my app, the default value seems to be linked to the system font size setting. Set it to 100 to prevent the webview from changing the font size.
https://developer.android.com/reference/android/webkit/WebSettings#setTextZoom(int)
I have a project that is displaying 16px text font at 0.5ems links on the iPhone perfectly fine.
However, when I switch to an Android browser, the text font enlarges itself and my positioning of the links are screwed.
My links are in a
<p><a>[Link]</a></p>
statement.
Is there any way to prevent the Android text from resizing itself? Or is there a better solution to this?
EDIT:
I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart?
I had a similar problem as well. I had a design that was designed specifically for the Retina display, but the retina display actually has a pixel density of 2, so a pixel isn't necessarily a pixel (non retina iphone pixel width: 320px, retina: 640px).
To fix that, I put this in the <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'> so that a normal phone will scale as I expect, and the retina display would scale appropriately (half scale).
I'm not sure what kind of design you're using, but I'd play around with the initial-scale and maximum-scale, try both .5 and 1 and see what you get.
If you use pixels (px), it is related to the screen pixel density. An iPhone "retina" display would show text differently to your Android device.
This article covers the topic pretty well: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
I found a setting that might help in another question, Font size rendering inconsistencies on an iPhone:
body {
-webkit-text-size-adjust: 100%;
}
An alternate value is described in another question, Font size issue with iPhone:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Seems like one of these might prevent the android browser from resizing. Hope this helps.
If you want to stop Android from auto-scaling your pixel values, you can try adding this to your viewport meta:
target-densitydpi=device-dpi
Here's a good reference on the same:
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui