I'm developing Android app with Phonegap and have problem with different screens. I searched a lot and everyone recommends to use meta tag , so I have include it in my html:
<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" />
when i'm testing it in emulator , it's exactly what I want , but when I tested it on Samsung galaxy S4 and Samsung galaxy s2 , it's very small. S4 is showing it much more smaller. One even cant read content ( I think it's because of xhdpi and hdpi). So can anyone advice me how to deal with it? Thank you very much!
The problem that you're having is because of the target-densitydpi=device-dpi. It's trying to utilize the high resolution your phone has. The default meta tag that PhoneGap starts out with has extra details that is causing this "problem".
Change your meta tag to:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
and it should work fine.
You should using CSS to control the UI base on the screen size & orientation.
ex:
#media only screen and (min-width:768px) and (max-width:959px)
Ref docs: CSS media queries
Related
I made cordova app with bootstrap4.
It's resolution work fine on almost smartphones.
but, this app has resolution problem that width is so small on some smartphones.
I added viewport line like it.
How can I do someting?
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, target-densitydpi=device-dpi"
left picture is works fine version. right picture has problem.
I am using cordova with jquery mobile for one android app.
For Viewport meta tag i am using below code
<meta name="viewport" content="width=device-width,
initial-scale=1.0;maximum-scale=1.0;user-scalable=0; target-densitydpi=device-dpi">
With older jquery mobile version it was returning actual height and width of device but when i have upgraded jquery mobile to 1.4.5 and cordova to 5.0 then it is returning some different resolution with window.innerHeight and window.innerWidth
Based on this resolution i am taking css files with media query
Please help me with this
Regards,
Bindal
My current workaround:
In index.html: <meta name="viewport" content="user-scalable=no, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, width=device-width, viewport-fit=cover">
In index.css the "body" part, add: transform-origin: 0px 0px; transform: scale(0.5);
window.innerHeight and window.innerWidth has the native resolution.
But haven't run test if one pixel is one pixel. Also I don't have enough device to test if it works across different device and different version of android.
With this mets it works for me, try it
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
Media queries are the wrong approach for several reasons:
you will not get an exact match for your screen, proportional layout is for some elements impossible
You will not be able to target Android 4.0+. Quad-HD and older devices use the same proportion with different -device-pixel-ratio factors. Factors are interpreted differently through Android versions, so some displays will be messed up
media queries are intended to supply DIFFERENT visuals for different resolutions, not the same visual scaled across resolutions
I recommend using https://github.com/biodiv/cordova-anyscreen (and drop jquery mobile). It will also give you the correct display and available resolution as app.deviceWidth, app.deviceHeight and app.containerWidth etc.
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