I'm working on porting an iOS app built with PhoneGap 2.2.0 to Android. My main issue is having the app scale appropriately depending on the device's screen size. Using getResources().getDisplayMetrics(), I get this info about my Android device:
DisplayMetrics{
density=1.5,
width=540,
height=960,
scaledDensity=1.2750001,
xdpi=368.06036,
ydpi=365.22525
}
This is my viewport:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, target-densitydpi=143" />
As you can see I am hardcoding the target-densitydpi to get the app to reasonably scale to fit the screen of my Android device. Since I want my app to support multiple screens, is there a way to use the information given by DisplayMetrics to adjust the viewport appropriately.
I have looked up different solutions online but none seems to work as expected to.
Thanks in Advance.
I would suggest looking at the problem from a different angle: how can I make my application scale to the screen size of any device? At this point you are trying to support Android and iOS, but later on you might also want to support tablets, Windows Phone 8, BB devices, etc. As such, I would go with a web application design that is responsive to the screen dimensions: that is the application dynamically allocates space according to available dimensions. Check out the below links/frameworks for responsive design:
Twitter Bootstrap: Responsive Scaffolding
WebBlocks: Responsive Mobile Designs
You can also read more about the reasons behind the technology at: Why 2013 is the Year of Responsive Web Design?
Related
I'm having problems scaling my app on different devices that have the same proportions but with different -device-pixel-ratio factors.
Example: I have two 360x640 screens, and I make everything fit on one of them, but in the other the content is too big. It doesn't matter if I use em/rem units and change the font-size on html, or if I use media queries or px units. As long as the proportion is the same, they result is gonna be different.
My options are:
Use viewport units and drop support for older devices (or use Crosswalk and add 20mb to my 500kb app), or
Use cordova-anyscreen, which is the only thing I have found, but just seems wrong.
I might be missing something, but I have already spend two full days browsing Google and Stackoverflow, and I don't get how people do to make apps scale proportionally and density-independent. I really need help here. Thanks.
I do traditional way of work.
I use css to make it to suitable for other devices.
Just make sure to have,
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
and use % or em if possible for your css.
To define different screen sizes in css, use
#media (min-width:400px) and (max-width:434px){}
/* This is for iPhone 6+ */
I dont know if this will help you, but its help me.
I have the same problem to compile my code to android/ios devices becouse of scaling. The lower menu not show.
But i found Intel XDK where you can build app for many devices and OS
Its use crosswalk/cordova etc. where there is automatic scale. Maybe this will help.
Try it out :)
I am experiencing some issues with a website I am trying to build. I did some research (like always) among this and other websites (as usual) and like never, I was not able to find a solution that worked for me. Please have patience with me since I am a beginner (developing for practice and learn purposes).
So here's the deal. I started building a website but I got stuck in making it responsive. After the research I was talking about earlier I used the
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
It works as long as I am accesing the website throught the Chrome Browser for Android. It also works in Chrome for Windows when I select the mobile view or resize the window. The only browser that acts like skipping that meta line is the stock Samsung Browser (WebKit - it think, though not sure about the name).
Is there anyone that experiences the same thing? I was thinking is only my phone (Galaxy S2) but it seems that I am not the only one with this issue.
Thanks in advance and looking forword for a solution.
LATER EDIT
Worked around with the values. Seems like the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes, target-densitydpi=device-dpi"> is actually not ignored.
I played around with the max zoom values and it seems to work. The only issue now is that the stock android browser does not display the page acording to the #media screen and (max-width: 640px) present in the stylesheet file...
LATER (FINAL) EDIT
The css code was somehow faulty. Deleted the multiple screen resolution support and worked around only with the normal web view, then added support only for one resolution (#media screen and (max-width: 500px)) seemed to work (anyway, there are just a few devices out there that has width lower than 500). Now in regular view, the site successfully shows the content according to the CSS file. Shrinking the resolution will also display the page in a correct manner. I also noticed, that using "max-width" should be done in ascending order (first deal with high resolutions resolutions first).
I've read a few of the related StackOverflow questions:
here, here and here,
but I feel like I am still without an answer.
I have a great responsive design (very simple), that looks great however you re-size the browser on desktop. Now when I inspect the element via Chrome and use their phone preview, everything is so small and tiny. The background doesn't stretch like it does on desktop. The main content doesn't fill the area like it does in the desktop, even when the browser is re-sized to be the same resolution as a phone's.
Yes, I've included the viewport specifications.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Honestly, no matter how much I play with the width, it doesn't seem to change anything - in the desktop browser, or on mobile.
Why does a webpage look completely different in a phone's browser than it does in desktop with the browser shrunk to the exact same resolution?
Maybe the user-scalable=0 instead of no?
content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0"
I developed an app using Adobe's Phone Gap, mostly checking it on mobile Safari, Desktop Firefox and Desktop Chrome, but when I checked it on Android High Resolution Devices (HRDs) all of my fonts and measurements (calculated in REMs) were half as large.
I tried fixing this with:
#media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx){
html{
/*font-size:125%;*/
}
}
...but while it made Android HRDs look normal, now iOS HRDs devices look overly large. What is the best way to correct this discrepancy? I looked into Android-specific media queries, but that would mean adding like 20 of them and there is no guarantee that they would be affecting Android devices specifically.
Add this meta tag in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
According to a talk by Mike Stamm at CSSConf the problem was actually in the target-densitydpi attribute in the meta viewport tag, which Android uses, but Apple ignores. It should be:
<meta name="viewport" content="target-densitydpi=160">
Apparently that solves the problem with most Android devices, (although some Android devices require target-densitydpi=140).
Related: that video linked above has some interesting historical reasons behind the differences in iOS and Android displays.
I'm trying to design a web form that can be easily viewed/used on computers as well as smartphones. I created a floating layout that resizes from 1000px down to 300px along with the browser window. It works fine on a computer, and from what I've been told on an iPhone. But when a user pulls it up on Android, Android simply zooms way out to view the entire 1000px page, rather than "collapsing" it to the "narrow" mode.
[link no longer active]
Do I have to use some type of browser detection to do this? Or is there a way to get Android to work like a really narrow computer web browser window?
Does your meta viewport have anything for dpi?
<meta content="width=device-width, target-densityDpi=device-dpi" name="viewport">