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.
Related
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.
I found lots of threads about this topic but no one of them solved my problem.
I'm developing a website with width-based media queries, in order to give to the pages different styles depending on the device.
In the mobile version I need to use a lot of 'fixed' positioning but it brings a very big problem: in the Android Internet, in the iOs Safari and in many other mobile browsers i do not see the fixed positioned tags.
They are there (when I click in a place where a button should be, I see the shape of the button blinking) but they are invisible.
I used the viewport meta:
<meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, orientation=portrait" />
but it doesn't change anything...
I double checked all the z-index and I debugged all the code (looking for some syntax errors) but I'm not able to fix the problem.
Does anyone know what it could be and how to fix it?
Thanks!
Edit
If i scale my laptop browser to a "mobile" size and i watch the website in his mobile version, everything is OK.
I have created Phonegap + standard Twitter Bootstrap app for android. Everything works OK, but when I open app on phone with high DPI like HTC One S (1280x720 display), everything in GUI (including controls - buttons, inputs, ...) is very small and user gets bad UX. What can I do to make it look like on mobiles with standard DPI?
Meta looks like this:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
Ok, got it. I had to remove target-densitydpi=device-dpi which was copied from don't know where.
I'm building an application with PhoneGap. i'm using my Galaxy S2 to test the application, and his screen resolution is 480x800. But when the View is created, his size is 320x800!
I tried too many things, but nothing works...
Is there here anyone that can please help me?
Oh, I'm using android's environment, with Eclipse, ADT, etc.
I found a way to do that. I already had tried by using a meta viewport, but I guess I don't put everything that is necessary.
Just put this meta tag below and everything should be fine.
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi" />
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