I'm trying to make this fake app using a fullscreen webview. I made the web pages using the browser but using the webview everything is huge.
i tried the viewport meta, the setUseWideViewPort command, but it doesn't help.
I almost fixed that using:
webSettings.setTextZoom(30);
But the pictures and element sizes are still big ! How can I fix that ? Thanks.
PS : I cant change the viewport width meta to a specific pixel size because it mess the css "width:100%".
You gotta set the textsize using the html/css code.
Related
I'm having this problem with a website we're building.
http://swaegersverzekeringen.e-staging.be
At the top left we have the company logo, which is an SVG image. (fyi : IE lte 9 a png gets loaded)
The SVG scales perfectly if I give the object tag holding the svg another width and height at different breakpoints. Now apparently, Android browser likes to do his own thing and doesn't scale the svg at all.
I can see that the object tag IS given the proper width, but the svg is displaying at full size and gets cropped because the object container is 100px wide.
I've been googling about this for an hour now, so I decided to ask around here what might be the solution.
Thanks in advance guys!
Is there any specific reason that you're using an object instead of an img tag?
You could deliver IE9 a .png as well and use img for browsers that support it.
You have to add style="max-height: 100%" in the actual SVG file. You can use the tag in your markup, but using tag is better.
I'm developing an application with phonegap(css3 + html5 + javascript) for iOS and Android 4.x.
On Android 4.0.3 device, I use with css a background image as button with this code:
.mycssClass
{
background-image:url(../images/myImage.png);
background-repeat:no-repeat;
background-size:100%;
background-color:transparent;
border:none;
font-weight:300;
....
}
Now, the image is displayed correctly, but if I hold down on the screen, it becomes grainy.
If I remove background-size:100%; solved the problem, but the image is not displayed in the correct size.
I add some code lines for managing anti-aliasing, based on the proposal of this aid
https://developer.mozilla.org/en-US/docs/CSS/image-rendering
without good result.
Any suggestions?
Thanks in advance,
Cristian
Your issue have solution.
Problem happens because of difference between antialiasing mechanisms in CSS engine and Android WebView component. CSS antialiases images before they were scaled and browser antialiasing is being applied after scaling.
To avoid this effect you have to disable scaling somehow.
There is good approach which allows to keep responsive images and avoid scaling. Replace your background with img tag and apply CanvasImage to them after page is loaded.
CanvasImage replaces img elements with canvases of same size as element is at the moment of execution so there will be no scaling.
Feel free to ping me if you will have any problems with this.
I am using a WebView in an Android Activity to show a simple html who has a single jpg inside. When the jpg height is smaller than 3000 pixels, there is no problem, it show perfectly, but when the jpg is above 3000 pixels, it does not show. Can be this a limitation? Or memory issue? I am using Android 2.3 to test.
Your problem is that you're using a huge image, so the device can't handle that much data.
In order to display it properly and nicely mi advice is to use an html table wich each cell containing a slice of the image.
The browser will just render the parts of the table being displayed, so your image will be loaded properly.
I used this approach on a project and worked perfectly.
Regards.
I am using web view to load HTML page which as background image (827 x 1102), I trying to wrap the content within the given height and width of the webView and I don't want to scroll the content at initial stage by exploring regarding this I came to know about below lines of code
mwebview.getSettings().setLoadWithOverviewMode(true);
mwebview.getSettings().setUseWideViewPort(true);
The above code is working fine on 2.2, 2.3.3 but it is adding extra space on 3.0 and higher version, you can check the attached images on different version.
I even tried by appending
<head><meta name=viewport content=target-densitydpi=device-dpi/></head>
In html file but no luck.
Motorla Xoom 3.0
Samsugn Tab 2.3.3
Any help will be appreciated
Thank you in Advance
I'm looking for a way to have images appear in a WebView that initially fits the screen, instead of showing the actual size. Is there a way to do this?
How is it different if:
1) I open an html file with an img tag to the image
2) I open the image file directly
Thanks for any assistance.
I ended up using:
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
To make the contents of the page fit to the WebView.
If I understand the question, you have an image on a web page that has dimensions X x Y and when you load the webpage into a WebView you want it to take up the dimensions of the android device (X1 x Y1). To do this pass a querystring to the url which renders the height and the width of the image at 100%. Also have the layout_width and layout_height of the webview set to the appropriate values.
If you load the image directly into the WebView, you can set the height and width of the image
You can use Webview's LayoutAlgorithm. But this will resize only those images with Width greater than the width of the device. This won't help you with images smaller than the screen.
Link: Can Android's WebView automatically resize huge images?
Another Solution is using a Javascript or an External Library like HTML Cleaner to remove the
<img> size attributes and then change their size via code and getWidth().