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.
Related
Most high-end smartphones have a 720 X1280 or 640 X 1136 resolution these days.
If I set the width of an img element to 360px, will it fill half the screen on these phones? If so, do I have to use different layouts for different resolutions for mobile phones?
What about font-size? If you set it by pixel, will smartphones interpret it literally? A 10px font size will be big enough in a 320 X 480 screen, but unreadable in a 720 X1280 resolution.
yeah if you work on pixel thats what android will do. however highly not recommended. DPI is a much better unit.
If so, do I have to use different layouts for different resolutions for mobile phones?
not really
If you set it by pixel, will smartphones interpret it literally?
Yeah they will interpret it in px, but again not recommended
There are many ways to have a layout on mobile devices for different resolutions, one quick and time-effective way to get started with is to code your layout with your desired screen width in mind, and then have this line in your header, where 720 will be the width you coded for originally:
<meta name="viewport" content="width=720, user-scalable=no" />
The browser will scale the layout to fit its screen.
You can have the line as the following too:
<meta name="viewport" content="width=720, user-scalable=yes" />
This will enable the user to zoom in (and out)
With this, you can have a maximum zoom defined and permitted for the user:
<meta name="viewport" content="width=720, maximum-scale=1, user-scalable=yes" />
With maximum-scale=1 you allow the user to zoom in up to the original width of the layout and no further.
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'm developing a Android App with SenchaTouch2. I used a 480px wide png file as background image to fit in GalaxySII which has 480px width. It's perfectly fine in browser but after I exported as native app, that background gets bigger and out of the viewable range.
After some observation, if I want to fit in 480px screen, your original image should be 320px which is 1/3 difference.
Please let me know who can I manage to display background with original width n height.
Thanks!
It sounds like your WebView is performing scaling. That is, the default scale of 1.0 is equal to an mdpi device. Galaxy SII is an hdpi device, which would be scale 1.5. So your 480px image is becoming 480px * 1.5 or 720px and why a 320px would look like what you want.
Try specifying that the viewport uses the native DPI of the device like so:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width"/>
Alternatively, you could specify it as:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0"/>
You can read more about setting the viewport to target Android devices at: http://developer.android.com/guide/webapps/targeting.html
Note that if you run into subsequent font issues, you'll need to follow the steps in my answer to font size different on ios and android
Also note that for Sencha Touch 2, it looks like they turned off this automatic viewport setting: http://www.sencha.com/forum/showthread.php?184219-Viewport-Meta-Tags-not-injected-automatically
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