I am currently using intel XDK to build a HTML5 android app. App files were created with Cordova command prompt, and HTML assets was done using JQuerymobile. Files were transfered to Intel XDK for the building process and apk was obtained. However, when I install the app on some phones (Samsung Note3, Android 4.3) it appears the page is zoomed in, and displays like when you try accessing a non-responsive desktop website using a phone.
However, when I installed same app on A Samsung S5 (Android 5.0), the app displays properly the way it should be.
How can i fix this? will the meta viewport tag help? See attached screenshots. Kindly help please.
This is how it appears on the Samsung Note 3
This is how it appears on the Samsung S5
This is the current viewport meta tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Pls help!
Try building using the "Crosswalk for Android" build, this will embed a more advanced runtime with the app. This will give you consistent appearance and performance regardless of the Android device version.
Changing the target-densitydpi did the trick.
Change from target-densitydpi=device-dpi to target-densitydpi=medium-dpi or remove altogether.
Related
I have created a small site on ASP.NET some time ago.
I have used:
ASP.NET and Bootstrap.
The issue is that all worked fine for few mounths, but today i have noticed that if i request Full Website version in Google Chrome on Android the site doesn't adapt.
All works fine on WP, iOS and even Android 4.4 with Chrome 51.0.2704.81
But my phone shows site not adapted to the screen size. My phone is Android 6.0.1 and Chrome is 52.0.2743.98
On desktop if i resize the Google Chrome window, the site gets adapted.
I have read some articles on stackoverflow, my index.html contains this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Here how it should look and looks on all devices:
Here how it looks on my Android 6.0.1 and Chrome is 52.0.2743.98:
I have successfully create my phonegap app and I find the same code results in perfectly readable sized fonts on iOS but difficult to read font size on an Android. I would have expected them to be similar.
Has anyone else faced similar issue? How to build once and make readable on both? Thanks!
I found a post that related to webviews that helped but I reference it here in case someone (like me) who is new to phonegap fails to make the connection.
font size different on ios and android
My viewport inside my html page was
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
I know little about viewport other than having read references that I should have it.
I took the first of #louielouie suggestions and removed reference to, rebuilt my app in the phonegap build service and the app results look similar on an ios ipod touch and a samsung galaxy tab 4.
That's right, I want to enable zooming rather than disabling it.
I have created a responsive website and all is looking good. However for some reason you can't pinch-zoom in Chrome on a Nexus 7 (running Android 4.2.2).
This is my meta tag that makes sure it shows the site with the right CSS for the screen size:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Nowhere here do I say the user can't zoom. As I say, the site is responsive so there is no reason for the user to need to zoom, however if a user wants to zoom I don't want to stop them. There is no problem on the iPhone, the user can zoom if they want to. But on Android they can't. I have tried adding user-scalable=yes and user-scalable=1 but this makes no difference.
The only thing that works is removing that meta tag but then the site renders itself as if it's being displayed on a large screen so it is no longer responsive.
Is there anything I can do?
#David Lee's comment on top is correct: It seems more of a Nexus 7 thing than a Chrome problem. Google has had a lot of complaints regarding pinch-to-zoom wrt Nexus 7 and there is speculation that they are trying to work around Apple's pinch to zoom patent.
From what I know just using
<meta name="viewport" content="width=device-width, initial-scale=1">
should work.
I've looked at http://m.skyscanner.com/ as an example and it works on other devices with chrome and other browsers like Dolphin HD. And all that site has is the viewport code from above.
Chrome for Android has a way for us to force zoom - Open up the browser's main settings and tap "Accessibility," then check the option called Force enable zoom and see if this works in Nexus 7(I dont have that device so cant test it)
What version of Android? Android 2.2 doesn't support the viewport meta-tag, if your version is between 2.3.x and 4.x try this:
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes" />
Hope this helps.
Although it is not a complete solution to your problem, but it can zoom a particular region.
Thierry B wrote a plugin that will do this and posted it on github repo
You can demo it here:
Just click on the part you want to zoom
Or for Viewport Zoom please refer to this tutorial
use this hope it will help:
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
The last parameter below: user-scalable = 1:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />
I have just developed an iPhone app using Phonegap and I now tried to post it to Android using Android SDK and guide available on Phonegap website. Everything works good except screen resolution and as I tested it on Android Emulator setting Nexus One Resolution, I found everything is too small and leaves half the screen empty. Is there a setting I need to put to make it exactly float like on iPhone?
UPDATED
I am using this viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
Use meta Veiwport tag or CSS media queries for multiple screen support
References :
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
http://www.quirksmode.org/mobile/viewports2.html
http://www.quirksmode.org/mobile/tableViewport.html#metaviewport
According to many sources, a meta tag like this is supposed to prevent the browser from letting the user zoom in and out of the page:
<meta name="viewport" content="user-scalable=no">
This works correctly on most mobile browsers, including iOS and most Android phones I've tested. However, the Samsung Galaxy S (Sprint Epic) does not respect it, instead allowing arbitrary zoom in/out by the user.
You can see this by visiting the Facebook "touch screen" page at http://touch.facebook.com/ - on most phones you can't zoom in that page, but on the Galaxy S you can.
I've also confirmed that the Galaxy S II correctly respects the meta tag, so this seems limited to the Galaxy S.
Is this just a bug in the Galaxy S's build of the browser? Is there any work-around that doesn't fail on other devices?
i use this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
and it works on my galaxy s
I had the same problem but after some efforts I realized that is not about the phone or android version, it's about samsung explorer which is the default explorer.
Changing it to google chrome solved the problem for me. However I guess samsung should take care of this issue.