I've got PhoneGap Android app that is exactly 480 pixel width and I want to set viewport size to this size on every possible Android's device
I've tried this tag:
<meta name="viewport" content="width=480, user-scalable=no" />
But it was ignored by all devices and emulators I tested with. Then I tried:
<meta name="viewport" content="width=device-width, initial-scale=0.67, minimum-scale=0.67, maximum-scale=0.67, user-scalable=no, target-densityDpi=device-dpi" />
And this worked, but only on some (smaller) devices. On mu Samsung GT it gives correct 480 pixel width viewport, but when launched on tablet it gives 800 pixel width viewport.
Am I missing something obvious?
After several hours of debugging I finally found a solution:
WebView will ignore width of the viewport unless it is explicty told to be loaded in OverviewMode. So if anyone come here from Google, here's the solution:
Add to your Java source:
public class YourGame extends DroidGap
{
super.onCreate(savedInstanceState);
super.init(); // Don't forget this, you'll get runtime error otherwise!
// The following does the trick:
super.appView.getSettings().setUseWideViewPort(true);
super.appView.getSettings().setLoadWithOverviewMode(true);
super.loadUrl("file:///android_asset/www/index.htm");
}
Not sure why, but I had to remove , target-densityDpi=device-dpi from the viewport tag to get this to work - the accepted answer didn't help me.
using a Samsung Galaxy Nexus
Related
I created a web-app, with a target of a Nexus 4 phone in mind, intended to be used in landscape orientation.
It looks fine using chrome. But when I then used that HTML/CSS to create a Cordova App, the display is way too big for the phone. I have tried many things suggested by many people to no avail.
As an example, if I have the following div defined:
#content {
border: thin ;
border-style: solid ;
width: 960px ;
height: 475px ;
}
and as a web-app, the border fits nicely in the display of the Nexus 4 using chrome. But I have to reduce that 960px down to around 570px to get it to fit when it is a App installed via cordova. I am doing a 'fixed' position for all my divs inside that #content div. There is only 1 target device that this App will get used on - I don't care about any other devices. (Yes, I really want to do that). I don't want scrolling.
I tried setting the target-densitydpi=medium-dpi" as suggested in Phonegap/Cordova App Shrink too small on high resolution device like Samsung Galaxy S4
and Phonegap Application text and layout too small
I've tried setting initial-scale=1.0 like many people suggest.
I've tried 1.5 and 2.0 which makes it even bigger, but 0.5 does not make it smaller.
I tried adding
preference name="EnableViewportScale" value="true"
to my config.xml as suggested by PhoneGap: Scaling down a webpage with viewport
While I have tried many combinations, my basic viewport definition is:
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1, minimum-scale=1,
width=device-width, height=device-height,
target-densitydpi=medium-dpi" />
Nothing has worked for me.
I have no idea how this stuff works and I have very little experience with front-end and mobile App technologies. I see no relationship between the advertised hardware devices resolution and what I see on a web-app, and what I see on a native App. I don't know why they would behave differently on the same device with the same CSS.
Any suggestions and/or pointers would be greatly appreciated.
I found a solution at Android 4.1 viewport scaling ( setInitialScale, meta initial-scale not working)
(although there is a missing opening curly bracket).
By using:
function customScaleThisScreen() {
var contentWidth = document.body.scrollWidth,
windowWidth = window.innerWidth,
newScale = windowWidth / contentWidth;
document.body.style.zoom = newScale;
}
and setting my viewport to:
<meta name="viewport" content="user-scalable=no,
initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6,
width=device-width, height=device-height,
target-densitydpi=medium-dpi" />
it now fits within my Nexus 4 screen.
Although the height (in landscape mode) comes a bit short of what I ideally wanted, the entire display is shown. It uses up about 90% of my available height which I can live with.
I also found that setting:
<preference name="EnablEnableViewportScale" value="false" />
in config.xml does nothing - whether I set it to true or false.
Before, I was able to scale upwards of 1.0 (such as 2 and 4), but not below 1.0, no matter what EnableViewportScale was set to. But the above code solved this.
I am running Android 4.4.4
I'm using the following line in my webapp:
<meta name="viewport" content="width=720, maximum-scale=1, user-scalable=no" />
This works perfectly fine on mobile safari - the document is 720px wide and fits the screen perfectly. However, when tested on the HTC One, the content was like 2.5x the width of the screen.
Android is supposed to support the viewport tag, so why is it ignoring the pixel width it should be displaying in?
All help appreciated.
Answer taken from Android docs:
Whether the user can change the scale of the page at all (zoom in and out). Set to yes to allow scaling and no to disallow scaling. The default is yes. If you set this to no, then the minimum-scale and maximum-scale are ignored, because scaling is not possible.
In that case, remove user-scalable=no and see what happens. That might be the fix you need.
since jelly Bean, i have problems with my webapp and the render of the viewport in the webview.
Usually i use the meta viewport with this parameters to fix my content and have a good design :
name="viewport" content=" width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=no;
target-densityDpi=device-dpi;
But with Jelly Bean, the property "target-densityDpi" seems to be not supported or ignored.
On a galaxy nexus (720px*1280, device pixel ratio to 2), the window width size is 360px
And on galaxy nexus S (480*800, device pixel ratio to 1.5), the window width size is 360px.
I don't found on the Android developper's website any help or info about this subject.
So, target-density is really ignored ??
A trick can force the deviceDPi ?
Or we are forced to work with the medium-density screen, by default ??
If anyone have a solution ?
Thanx !
I achieved the same thing on the latest Chrome for Android using this jQuery:
<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'>
var viewPortScale = 1 / window.devicePixelRatio;
$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width');
This sets the initial-scale viewport meta tag setting to the correct scale for 1 CSS Pixel == 1 Device Pixel.
You can't use 'width='+screen.width because screen.width doesn't return the physical pixel dimensions. I tried using http://responsejs.com/labs/dimensions/ on my Nexus 7 in Chrome and all the numbers are viewport pixels.
This is an old question, but the problem might be in the use of semicolons. Change the semicolons to regular commas and remove the last semicolon.
I use the following viewport metatag in my app and it works correctly in Jelly Bean.
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
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 trying to create a mobile website for android. When I set the width of the body to 480px (the width of the screen) the result is about 50% larger than what I expect. It seems that android is scaling what it draws and messing up all my layouts. Does anyone know how to disable this, or work around it?
I'm already using this:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
You're missing the secret new Android-only viewport property "target-densityDpi" which you can use to configure browser scaling. See the linked question for more details.
A device running Android does not necessarily have a screen width of 480 Pixel. Don't set a fixed width at all.