I have a website which uses bootstrap for responsiveness.
I tried to use Android phone to open this website in mobile browser, all UI components work fine, grids get re-located to fit the right size of screen.
I then wrap all the html code and related resources into a cordova project, everything works fine except the responsiveness. So the problem is the responsiveness isn't triggered in this hybrid app so all UI components stay where they are as they are displayed in a computer browser.
Do you have any ideas about this issue?
Thanks in advance.
Update
Here is my viewport
<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" />
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 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.
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
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" />