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
Related
Basically what I'm trying to do is get my viewport width the same on all mobile browsers and make sure the user cannot zoom in or out (scale).
The mobile browsers that don't seem to support this correctly are:
Windows phone 8 IE10
Android native browser
Android Firefox browser
The following line of code works on all mobile browsers except the one from the company that rejects standards as usual (IE, in this case IE10 Mobile):
<meta name="viewport" content="width=620, user-scalable=no" />
I found this question with accepted answer:
Viewport for IE10 & 11 desktop, but not mobile
After applying the below css and javascript code, it still keeps the viewport as device-width instead of the 620 I'm trying to achieve.
CSS:
#-webkit-viewport { width: 620; }
#-moz-viewport { width: 620; }
#-ms-viewport { width: 620; }
#-o-viewport { width: 620; }
#viewport { width: 620; }
Javascript:
$(function(){
if (navigator.userAgent.match(/IEMobile\/10\.0/) || navigator.userAgent.match(/IEMobile\/11\.0/)) {
var msViewportStyle = document.createElement("style")
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
)
document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}
alert($(window).width());
});
As soon as I found out that other browsers had this problem as well, I was able to find better results on the internet.
I have found a solution on at least a part of the question. The viewport sizing seems to work now and we get the correct scale. It still seems I have to accept the fact that with this solution, the user will be able to scale the page manually.
This answer was stripped from a different question:
Trying rendering the viewport meta tag like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.
UPDATE: I was able to fix my bug for android devices all together by setting the below:
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.
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'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
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.