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
Related
I am making a mobile web page and struggling through dealing with various screen sizes and basically I want to make my page the width of the actual screen not the browser.
Because of the way mobile browsers work, the default "width" of most browsers is 320 pixels when the following meta tag is set:
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
What can I do to make it so that the page is the full resolution of the screen and not the "resolution" of the browser?
There must be some simple solution..
Note: setting the initial-scale flag to 2 made the page smaller than 320 pixels on both my iphone and android phone (640 and 480 pixels wide respectively) and setting it to .5 made the page 640px wide on both devices, but zoomed in on the android device. It gave the desired effect on the iphone..
My page: mmhudson.com/index1.html
The property you're missing from that list is target-densitydpi=device-dpi.
http://developer.android.com/reference/android/webkit/WebView.html
By default, WebView scales a web page so that it is drawn at a size
that matches the default appearance on a medium density screen. So, it
applies 1.5x scaling on a high density screen (because its pixels are
smaller) and 0.75x scaling on a low density screen (because its pixels
are bigger).
And
device-dpi - Use the device's native dpi as the target dpi. Default
scaling never occurs.
Did you try adding maximum-scale and adding densitydpi something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, target-densitydpi=device-dpi">
Here is where you can find good examples for mobile browsers :
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
But maybe it depends of the browser.
When I created a PhoneGap application previously, the images rendering on the pages are not correctly displayed on high DPI devices. So I made the web page with fixed pixel ratio: 1 for all devices without considering device DPI. But this will reduce the clarity of images.
I planned to use fluidic styles for my new app and not use specific width and height in HTML. But when I specified height in px for a div (in CSS), the height renders differently in different devices.
Is there any way to make the ratio of HTML as well as CSS width and height same?
Is there any unknown property to tell HTML to behave in different Pixel ratio.
I am using the HTML tag:
<meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
I would like to render the page in device-dpi to avoid reduction in clarity. Kindly provide your ideas.
You should ideally avoid using pixels and use em's. For ex: Instead of 16px, use 1.1em or whatever is the equivalent for your situation. This worked for my phonegap jquerymobile applications
Okay So the website in question is this:
Now if you notice on this website, the resolution of the white background div is 445px across y 686px long. It's also fluid so if you shrink it, it will appear different to accomdate different sizes. (if you are on a cell phone that has a smaller width than 400px, it will actually show different images).
Okay, but the point is here is that this page is not showing right on android devices as shown below.
That phone, along with all the other phones in that previewer that are 480px x 800px are displaying the website like that. The website, as you can see if you click on it, is a max of 686px tall, so why the heck isn't the whole page showing on this mobile device?
The size of that "playplanet" logo is actually 180px across and it almost fills up the whole width and the width of that phone is SUPPOSED to be 480px across.
Am I missing something here?
If you look at the source code, you'll see I added the following meta tags:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
These are supposed to tell the android browser to display the page as the actual width of the device, so it should be telling it to make it show as 480px X 800px (samsung galaxy s 2 is 480px X 800px), but in reality if you look at the screenshot, it is actually displaying it as HALF that size since the logo is only 180px and its almost filled up the whole screen.
It should fit in there perfectly. The funny thing is actually my smaller than 400px width layout works perfectly on the smaller feature phone sizes (240 x 320 or vice versa), but this bigger one is causing me problems.
Have you tried target-densityDpi=device-dpi?
Quoting from this article: Android team has implemented a custom meta viewport property to allow you to customize browser scaling for high resolution (HDPI) screens. The CSS "px" unit may differ from a device's actual pixels, as the browser "scales" images and fonts to a larger size than you requested. Worse, it's using a non-integer scaling factor (e.g. 1.5x zoom, to scale 320px to 480px) which makes images look really weird.
Also, in this introduction to meta viewport the example below the section "Setting the target density" looks like your case.
Here is the updated meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">
The screenshot you are looking at is flawed. It is displaying your site at a 240px x 400px resolution that is typical of many of the standard LG and Samsung smartphones. The Galaxy [as you point out] obviously has a higher resolution then that. My suggestion would be to report the bug to the service that you are using and until they correct it, try using another similar phone to test with. Any other android phone with the right resolution should work, as webpages are pretty much displayed the same for every single android device sans the resolution and orientation.
I would like to ask why my HTC Desire HD's browser reports viewport's width of 369px even though the actual pixel size of the screen is 480x800 WVGA.
I am using in my page this CSS styles:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
Can you please explain me this strange behaviour and how to force Android browser to actually set viewport's width to 480px rather than weird 369px ?
Thank you for any help.
A detailed explanation of the issue can be found in that blog post.
The number that you see (369px) is actually the size of the device multiplied by the default, assumed, screen density of 160 dpi.
In order to use the device screen density, you have to specify, in the viewport meta, that you want to use the device's dpi.
e.g.:
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
EDIT: The documentation of the WebView class now also has information about the target-densityDpi parameter, and the possible values.
I'm designing an HTML page for display in Android browsers. Consider this simple example page:
<html>
<head><title>Simple!</title>
</head>
<body>
<p><img src="http://sstatic.net/so/img/logo.png"></p>
</body>
</html>
It looks just fine on the standard HVGA phones (320x480), but on HDPI WVGA sizes (480x800 or 480x854) the built-in browser automatically scales the image up; it looks ugly.
I've read that I should be able to use this tag to force the browser to stop scaling my page:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
... but all that does is disable user scaling (the zoom buttons disappear); it doesn't actually prevent the browser from scaling my image. Adjusting the scale factors (setting them all to 2.0 or 0.5) has no effect at all.
How can I force the WVGA browser to stop scaling my images?
Ah, found it by searching through the Android source code. There's a new Android-specific "target-densityDpi" setting available in the "viewport" meta tag; as far as I can tell, it's totally undocumented, except for the check-in comment!
Add dpi support for WebView.
In the "viewport" meta tag, you can specify "target-densityDpi".
If it is not specified, it uses the default, 160dpi as of today.
Then the 1.0 scale factor specified in the viewport tag means 100%
on G1 and 150% on Sholes. If you set "target-densityDpi" to
"device-dpi", then the 1.0 scale factor means 100% on both G1 and Sholes.
Implemented Safari's window.devicePixelRatio and css media query
device-pixel-ratio.
So if you use "device-dpi" and modify the css for font-size and image
src depending on window.devicePixelRatio, you can get a better page on
Sholes/Passion.
Here is a list of options for "target-densityDpi".
device-dpi: Use the device's native dpi as target dpi.
low-dpi: 120dpi
medium-dpi: 160dpi, which is also the default as of today
high-dpi: 240dpi
: We take any number between 70 and 400 as a valid target dpi.
It's now part of the API documentation for the WebView: http://developer.android.com/reference/android/webkit/WebView.html
See the section entitled Building web pages to support different screen densities