Wrong window height and width issue in iPhone5

[Leon]

Hi,
I've installed my application in iPhone 5 using Ad-hoc installation.
My application working fine in iPhone 4 & iPhone  4S.
But in iPhone 5 $(window).height() is coming 628px instead of 540px and same issue in width also.
So there is an 88px extra coming in iPhone 5 and because of this scroll comes in the entire application.
I'm stuck at it.

Please help me out.
Thank you.

[Zdravko]

Hi Leon,

Different iOS devices have different sizes of UI elements. The following articles should shed more light:

• http://www.idev101.com/code/User_Interface/sizes.html
• https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7

If you're still having problem identifying the issue, we could take a look, but we need the name of your project. Furthermore does this happen on any Android device or just on iPhone 5.

Regards,
Zdravko
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Leon]

Hi Zdravko ,
Thanks for your reply.

According to the link you shared window height is 568px and width is 320px.
but in device when i check it using jquery ,height and width are 656 and 408 respectively.
So as i said there is an extra 88px which causing the problem.
And my project name is "trustMasterCRM" and you can check it.

I also installed one of your sample application "Sample-airlines" in iPhone 5 and same issue is there also.
You can check it in your iPhone 5.

Waiting for your reply.

[Zdravko]

Hello Leon,

I tried to reproduce your issue, but  without success.
I could only reach the login page because of no valid credentials, but the app was looking fine there. No scrolls appeared and the view fit the screen.

I tested on both iPhone 5 and iPad mini.
I called a function that displayed 548px for the height of the iPhone 5 which is in the normal boundaries.
No idea what could be wrong on your device, but it is not reproducible on even bigger ones.

Regards,
Zdravko
Telerik

[Leon]

Hi Zdravko ,
Thanks again for your reply.

Can you please tell me in which OS you are testing?
iOS 6 or iOS 7?

We are testing it in iOS 7 in iPhone 5.
and Are you able to see footer on login screen which contains 2 logos? 
Because we are not able to get footer without scrolling.on login page.

Waiting for your reply.

[Leon]

Hi Zdravko ,

We also tested on 2 different iPhone 5 also.
and same issue is also there.

[Zdravko]

Hello Leon,

I am testing on iPhone 5 with iOS 7 and  the footer and app are well displayed.
I attached a short video that represents the behavior.

I am sorry, but I really can't do anything else in order to help you with this case as everything looks fine locally.

Regards,
Zdravko
Telerik

[Leon]

Hi Zdravko,
Thanks again for reply.

From where have you installed the app?
From app-store?

You can install "trustMaster CRM" app from app store.
Just install it in iPhone 5 and check that issue.

we are facing scroll issue when we scroll by holding any control like textbox etc. and then scrolling is coming.
please check again by this steps because when we are installing it from app-store in iPhone 5 , we are not getting footer and scroll also.
please check again.

Waiting for your reply.

[Zdravko]

Hello Leon,

Indeed, the app from App store omits the footer. I am not sure what is the difference between app store application and the one that I used in my video from your repository. On both of them I didn't see a scroll.
I built the app with our AdHoc provision again and it looks fine. If we are using the same source code for build the only difference is the provision.

When I open both apps I find one major difference. The Log in form and logos are moved to the bottom. I've attached a picture.

I have a feeling this is caused by a CSS issue, but I can't be sure because the app from your repository is working fine as I demonstrated.

Regards,
Zdravko
Telerik

[Leon]

Hi
Zdravko,
The difference between app store application and the one from our
repository is that, we have used media queries for displaying footer in iPhone
5.
After using media queries we are able to show footer by setting body
height but still we are unable to resolve scroll issue because of that extra
88px in window height and you can also see that scroll by holding any control
like textbox etc. and then scrolling,you won't get scroll without holding any
control.

And we have tested it in iPhone 5S also. same issue is also
there.
Please download video from following url for reproducing issue.
Hi
Zdravko,
The difference between app store application and the one from our
repository is that, we have used media queries for displaying footer in iPhone
5.
After using media queries we are able to show footer by setting body
height but still we are unable to resolve scroll issue because of that extra
88px in window height and you can also see that scroll by holding any control
like textbox etc. and then scrolling,you won't get scroll without holding any
control.

And we have tested it in iPhone 5S also. same issue is also
there.
Please check attached video for reproducing issue.
http://183.182.91.146/ftp/CRM_Scroll_Isuue.7z

[Zdravko]

Hello Leon,

Thanks for the video. It helped a lot.
As far as I understand you have already solved your footer issue.
The only problem that remains now is the called "scroll" one, which I think will be solved with the information provided further in this reply.
 
This "scroll" behavior can be manipulated with the following setting inside your iOS config.xml file.

<preference name="DisallowOverscroll" value="true" />

More about Cordova iOS settings you can find here and how to edit the config.xml file here.
I hope I've been of assistance.

Regards,
Zdravko
Telerik

[Leon]

Thank's a lot for your help. Much appreciated.