Menu
I'm trying to use a WebView for displaying a big image with the built-in multitouch and trying to avoid memory crashes.
I set the webView this way:
setInitialScale(20);
WebSettings settings = getSettings();
settings.setJavaScriptEnabled(true);
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
And then load the following code:
<head>
<meta
name="viewport"
content="width=device-width, user-scalable=yes"
/>
</head>
<body
style="margin: 0; padding: 0">
<img
alt="image"
src="THE_SRC_GOES_HERE"
id="theImage"
>
</body>
The problem is that if it loads a medium image (1600x1200 for example) it works nice and the image fits the screen width.
But if the image is bigger 7300x5200 in my example, it appears like zoomed in and with the zoom out disabled.
If you want to test the images urls are:
img1 & img2
NOTE: I'm not the owner of that images and I'm only using it for testing
757
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
A typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, initial-scale=1">. The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels ...
T he viewport is a website’s visible area on the screen of the user. This dimension varies with each device, so the viewport will be smaller on a tablet than a computer screen, and smaller again on a mobile phone.
As you imagine, a 400x600 portrait photo when scaled to fit the width would be so long the user would not see the whole image on screen, thats why I need to limit width scaling to not exceed 90% height.
This <meta> viewport element instructs the browser instructions how to control the page’s dimensions and scaling. The width=device-width part specifies that the width of the page will be the screen-width of the device, which varies by the size of the device the website is being viewed on.
I think your images still end up larger than the viewport by default. Try this
<html>
<head>
<meta
name="viewport"
content="width=device-width, user-scalable=yes"
/>
</head>
<body
style="margin: 0; padding: 0">
<img
alt="image"
src="http://www.deviantart.com/download/165022929/Wallpaper_2010_by_scrumen.png"
id="theImage"
style="width:100%"
>
</body>
</html>
Don't know the correct answer but a possible walkarround could be set the img max-width to a "non-very high value" for example 2*screen.width when the page is loaded
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
