I have designed an web app well working on desktop browser and on ipad safari.
However, when I install it as an hybrid app with cordova 3.3.0, the height is not proper.
My footer is around 40 to 60 px upper the bottom although I have a position: fixed and bottom:0 rule in my css file.
Thanks for your help.
You might want to take a look at the following question: Div element wont stay at bottom
It could have something to with the webview not scaling properly. Hope this helps.
Related
I have a website that when I load in Chrome on iPhone, the width loads perfectly however when I add that url to a webview in my iOS app the web page seems to scroll slightly horizontally, its not quite an exact fit
Any idea why this could be?
There is easy fix.
Go to interface builder and make option Scales Page To Fit checked
I was required to display my website in a full page iframe, which was already a pain in the ass (I'm ranting sorry).
In the I have a select input and it seems that after I make a selection the screen freezes when the screen is vertical but if I put it in landscape mode it works like a charm.
Also the same thing happens when I go from landscape to vertical mode and again all comes back to normal back in landscape mode.
I though it could be due to some of my scripts but I remove everything and I still got the issue.
And I forgot to mention it, but there was no issue at all before installing ios 7.
I'm at it for a while so any suggestion would be really appreciated.
I tried reducing the code to the minimum cleaning out the unecessary stuff and putting everything together in a single file instead of using partial pages. Since then it seems to work so I'm gonna leave like that it's been long enough.
Still not sure what was the issue even though it worked on IOS 6 and without the iframe or in landscape mode on IOS 7. Anyway I'm done with it
I am building a small app using PhoneGap HTML/CSS. Now my problem is that position:fixed (used on a top bar) works on iOS 5 but not on iOS 4. Someone knows a fix for this?
Position:fixed doesn't work on iOS before version 5 and some other mobile browsers. There are a lot of solutions out there for this, but one that I can personally recommend is GloveBox written by Nitobi's own Jesse MacFadyen. It lets you define areas that are scrollable, and I believe in your case that would be the main content, while the top bar isn't scrollable.
Another advantage of this approach is that the user won't be able to "scroll out" of your app's view as if it were a normal website on Mobile Safari.
I created an iOS app last year using html, css, js, jqtouch and phonegap. The app has worked well until recently. It appears that since the iOS 5 update, there is a problem with the navigation.
If you scroll down the apps "pages" and try to select any options below the original screen horizon, the navigation doesn't work. Scroll back all the way to the top of the page and the links above the screen horizon all work. If you scroll back up the page, but not all the way to the original starting position, even the links that are above the original screen horizon won't work.
I worked with Phonegap support and they suggested the problem was with jqtouch. I updated the jqtouch files in the project, and now when I try to run the app (from Xcode) in the iPhone simulator or on a test device, the navigation doesn't work at all. Before, the "links/buttons" would change color as they were supposed to but no work. Now, the "links/buttons" won't change color or navigate to the next div or page.
Could someone tell me what I may have missed in updating the jqtouch/jquery files that could cause this?
We had the same issue and e solve it updaing to the latest jquery and jqtouch version.
Hopefully this will help you.
This is an extjs single-page application which works fine in FF, IE, and Safari.
There are several problems with viewing or using this extjs app in the iphone. The extjs panels/windows do not resize, as it would in a normal screen. When the user zooms out, the expanding viewing area is blanked out. An example image is below:
Iphone does not recognize the combo box of the extjs.
Unable to scroll down.
Viewport Issue:
The main issue is with the viewport. It does not scroll or zoom properly in Iphone.
Ext JS is not (and will likely not be) optimized for mobile devices. That's the purpose for Sencha Touch, which is the mobile framework built on Ext JS and specifically intended for iPhone and Android. I doubt you're going to have much luck resolving these types of issues using standard Ext JS.
We have experienced the same kind of problem with ExtJS and iPhones, and a slightly different, yet comparable, problem with android devices. I guess that those browsers report the screen size in a way that confuses ExtJS, so the layout mechanisms do not work. Since Sencha Touch has a similar API like ExtJS, making a Sencha Touch version of your software is probably the smartest way to make it work properly on iDevices and Androids.
Rather than using viewport, I used a column layout panel container. Most of the extjs stuff works fine. I placed this container layout into a div and specified its height and width. Also, <meta name="viewport" content="height=700" />.