Problems with iphone 5 in landscape mode

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:

IMG_0020.PNG

And when we turn it to landscape:

IMG_0021.PNG

(Landscape, when we scroll down)

IMG_0022.PNG

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

Kutir Mobility
Hi Bart,1. May be Responsive

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

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Visnupriya,In our CSS,

Hello Visnupriya,

  1. In our CSS, the width of the screen is set to 100%, this is combined with the following meta tag:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0" />

  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

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Jon Tara
Are you using jQuery Mobile

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.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Jon,We are not using

Hello Jon,

We are not using jQuery Mobile since it was giving us more problems then utility.

Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Jon Tara
In any case, I don't think

In any case, I don't think you want to set height=device-height. Just set width=device-width.

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Bart Fukkink
That did indeed solve a

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

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Jon,I have been testing

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:

IMG_0027.PNG

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

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Kutir Mobility
Bart,If you write "position:

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

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
I have given this option a

I have given this option a try, but this does not solve the issue sadly.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Kutir Mobility
Bart,Could you please send

Bart,

Could you please send some sample codes for us to reproduce the bug on our local environment?

Visnupriya R

Kutir Mobility

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Vinupriya,I will have

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.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Kutir Mobility
Bart,Unfortunately, I couldn

Bart,

Unfortunately, I couldn't reproduce it locally on my iPhone5 device.

Please see the following screen shots.

photo 1.PNG

photo 2.PNG

photo 3.PNG

Visnupriya R

Kutir Mobility

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Visnupriya,The issue

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

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Log in to post comments