It seems that every other mobile browser will scale images to the screen widths if you browse directly to the image (not to a page holding the image, but directly to the image), so long as the image is as wide or wider than the display resolution. Chrome on Android, however, scales the image much smaller to the upper-left corner of the screen. We've tested this on multiple devices all running the latest version of Chrome.
Since I can't seem to find any resolution to scale the images at that they would appear in Chrome as desired, does anyone have any methods to use a page to hold the image so that it would scale to the device width, no matter the OS or browser?
Thanks in advance,
Beems
I have raised a bug https://code.google.com/p/chromium/issues/detail?id=180239
A potential solution would be to create a webpage with the image in and the viewport set to the width of the image.
For example
<doctype html>
<html>
<head>
<style>* {margin: 0; padding: 0;}</style>
<meta name="viewport" content="width=[WIDTH OF IMAGE HERE]" />
</head>
<body>
<img src="[URL of IMAGE]" width="100%" />
</body>
</html>
See the sample I have here http://jsbin.com/ilequn/latest
Related
I've been working on a responsive design. To stop the content from crossing boundaries i've used viewpoint meta tag with width = 480. The problem is i want my website to load with minimum of 480px no matter what. If the screen width is less than 480px I want it to fit the screen width by "Zooming out".
I've used the following viewpoint meta tag:
<meta name="viewport" content="width=480px, initial-scale=1, maximum-scale=1" />
I've also used min-width css tag to specify minimum width.
<body style="min-width: 480px; width:100%; margin:auto;">
So after all this when i tried to load the website in DevTools Emulator (Google Chrome), it shows a horizontal scrollbar. Got any ideas on how to do it.
Have you tried width=device-width?
I don't think forcing the 480px in the meta will do what you want (not crossing media-query-type boundries).
I'm making a website skin / takeover.
It looks good on all browsers except android, where the skin image css parameter (width: 100%) is seen as the screen width not as at least the website's width. So it doesn't wrap the website but stops at the device's screen width. Please see yourself, I cannot explain very good. What can I do?
The first image is the website loaded on galaxy S3 and the second image is the website a little scrolled to see the right side. Please edit my question if you have better words.
This is the temporary link until I will move it to the client: http://csengrosseto.digitalprimes.com
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
This is the version that also controls the zoom.
I'm developing a mobile website. It's working fine on iPhone in Safari using the following meta tag:
<meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
In Android, the website is scaling to about 480 pixels in width and only taking up about half of the web browser, meaning the left side has the website at approximately 480 pixels in width and the right side is blank.
If I change the meta tag to this, it works fine:
<meta name="viewport" content="width=680; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
So "hard coding" the width at 680 pixels works, however I don't want to do this as this website is designed to accommodate multiple sizes. I tried adding target-densitydpi=device-dpi to the meta tag with no luck. What else can I do to have my website scale to the device's width on Android?
I 'solved' it by using $('body').css({ width: $(document).width() }) in jQuery, since the site already relies on JavaScript. I realize this is not a clean solution, but it works and I'm tired, so for now it'll have to do. If anybody has a better solution I'd love to hear it.
I'm developing application for android. my application has very big size (APKfile) that is because of some high quality images. I decided to move it into server and in app, just load the webpage and show it in through webpage. Each HTML page has just one image (without text and other items) and all images have 450 pixels width while height may be different for each image. When i load the web page, image is not fit to screen and is bigger than my screen. I need to have image fit to screen.
I know i can load just image from server but when i did it the aspect ratio was not fine and image squashed. its width stretched while the height didn't take effect. The code that i used was android:scaleType="fitXY"
because of some reasons I don't want change the code totally and i prefer to find a way to apply changes to html file. My html file is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
please tell me, how it is possible to have image fit to screen in all devices?
sorry, although i'm not bad in Android programming, I'm not familiar with web programming.
Thanks
Thanks guys,
but easier and fastest way is changing above image code to this:
<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>
now in all devices the image is fit to screen.
I was working on a mobile website. The test devices were an iPod Touch, and two Android phones. No issues with the iPod Touch, but the Android phones insisted on making the image be the full size. So you could only ever see about 25% of the image. I searched on "fit web page with graphic to device" and it lead me here.
The adding of width="100%" worked exactly as I needed for my issue. Simple! Thanks.
If you know the dimensions of your image, you can set the scale for your web view, e.g.:
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int imgWidth = ...;
int imgHeight = ...;
if(imgWidth > displayMetrics.widthPixels) {
int scaleInPercent = 100 * displayMetrics.widthPixels / imgWidth;
m_webView.setInitialScale(scaleInPercent);
}
Just add the check for the height and you should be good to go.
If you are using a WebView, the best and simplest way is to add a style tag inside the head tag:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
img{
max-width:100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
Like this, ALL THE IMAGES are fit and centered.
I've written a very simple Android app which basically presents a full screen WebView (no title bar, notification bar or URL bar) in landscape.
The Activity then basically loads a client.html file from the user's PC which then loads a fixed image meant to fill the whole of the screen. The client.html file has a meta element as follows...
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0, user-scalable=no" />
In the <html><body> the <img> src attribute is set by requesting the image at a specific size as follows...
<div id="BasicDemo" >
<img id="nscreen" />
</div>
<script type="text/javascript">setImageSource()</script>
...and this is the javascript setImageSource()...
function setImageSource() {
$.getScript("myscript.js", function() {
$("#nscreen").attr("src", "/control?size=" + getDimensions());
});
}
The getDimensions() function is another piece of javascript which calls into the Android app and retrieves the 'absolute' screen dimensions in pixels.
So here's my problem (and I know using absolute pixels is probably the root of it)....
On my Desire, it's classed as hdpi for web apps and has 800x480 actual pixels. The call to set the image source looks like..."/control?size=800x480" and works perfectly. The image fits my full screen. One tester, however, has a 7in tablet - also 800x480 but due to screen size it's classed as mdpi. Requesting the same sized image with "/control?size=800x480" and the fact the <meta> tag forces mdpi obviously means the image is oversized.
So the question - I'm forced to specify dimensions when requesting the image source - how am I supposed to translate things properly? Has anyone a similar experience they can share?
I've read Targeting Screens from Web Apps several times over and I'm clearly missing something.
Try CSS media queries to target LDPI, MDPI and HDPI:
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui