Good day,
While debugging some more in our application, we also notice strange behaviour on an iphone 5 with ios 7. When we turn the screen from portrait to landscape, the application becomes "to big". Since a picture says more then a thousand words, I got 3 pictures:
Portrait:
And when we turn it to landscape:
(Landscape, when we scroll down)
We made our application to make sure the grey border that you see lines the sides of the application. And this works fine on Android devices. Is this a known bug on the iphone 5? We would like it to fit our screen when we turn it in landscape mode.
Bart
Hi Bart,
1. May be Responsive issue. Please check whether you set width: 100% or not
2. IOS Browser has Zoom behaviour when page has textfield. Are you getting this issue when you focus on textfield?
Visnupriya R
Kutir Mobility
Points: 0
You voted ‘up’
Hello Visnupriya,
2. When we focus in a textfield, the issue remains. It cannot be a user zoom since we disabled that with the meta tag that is printed above.
Kind regards,
Bart
Points: 0
You voted ‘up’
Are you using jQuery Mobile?
If so, you should never set device-height in the meta. It isn't designed to work that way. You should only set width-device-width.
If you want to size your UI to the screen, you will have to use some Javascript to set heights of elements so that it works out to the device height.
Points: 0
You voted ‘up’
Hello Jon,
We are not using jQuery Mobile since it was giving us more problems then utility.
Bart
Points: 0
You voted ‘up’
In any case, I don't think you want to set height=device-height. Just set width=device-width.
Points: 1
You voted ‘up’
That did indeed solve a couple of issues. With this we will be able to continue working to see if we can fix it completely.
Thanks
Points: 0
You voted ‘up’
Hello Jon,
I have been testing a few things with this issue and removed the "device-height" from the meta tag. Unfortunatly, this greatly messess up Absolutely placed elements in the application.
For example, if we take the screen in wich we set a connection a webserver:
When we open the "Map" textbox, the button that we normally have on the bottom of our screen just moves up with the keyboard. This causes it to be above the textbox (the line under the map text is the upper line of the textbox). And no, it is not a case of just scrolling further down because it will not go any further.
Do you have any insight on this aswell?
Bart
Points: 0
You voted ‘up’
Bart,
If you write "position: fixed" style for bottom button, remove it and test it.
"position: fixed" may cause an issue.
Visnupriya R
Kutir Mobility
Points: 0
You voted ‘up’
I have given this option a try, but this does not solve the issue sadly.
Points: 0
You voted ‘up’
Bart,
Could you please send some sample codes for us to reproduce the bug on our local environment?
Visnupriya R
Kutir Mobility
Points: 0
You voted ‘up’
Hello Vinupriya,
I will have to strip down our application a bit for that. I will make a sample and try to get it up today.
Bart
EDIT: Attached some sample code that causes the problem on our iphone and on the ios simulator. Note that this is iOS7 and iphone 5.
Points: 0
You voted ‘up’
Bart,
Unfortunately, I couldn't reproduce it locally on my iPhone5 device.
Please see the following screen shots.
Visnupriya R
Kutir Mobility
Points: 0
You voted ‘up’
Hello Visnupriya,
The issue that you see in the last 2 screenshots is what, we think, is a bug!
What we think that should happen is that the Redo and OK button should always be at the bottom of the screen.
What you see in the last 2 screenshots, we think, is the screen remembering how high it is, instead of recalculating how high it should be.
Can you confirm this is the case?
Bart
Points: 0
You voted ‘up’