Viewport settings causing rotation problems in Mobile Safari

Question

Firstly, this is not a scaling problem that I have seen on other issues. In addition, I am testing this with an iPhone 4 running iOS 6. When working on a mobile project, I found a problem with the viewport tag and mobile safari. I redid everything into code as the main one, since I could get it. I have options:

• width = device width
• height = device height
• initial scale = 1.0
• maximum scale = 1.0 no
• user scalable = net>

Everything works fine until you rotate the screen. Nothing changes, and a black bar appears on the right side to fill in the gap (see. Screenshots). If I completely remove height=device-height , the problem goes away. However, I need to use this parameter. Otherwise, I have to ask another question.

After turning back to portrait mode, this black bar remains, and I can scroll left and right. This is a very strange problem. Removing width=device-width does something else unexpected. I have the code here if you want to try: http://toastd.net/viewport.html

Here are some screenshots:

Here it works fine in portrait mode:

When turning to landscape mode

Then will return to portrait mode

Answer 1

I believe this is a bug in Safari, but I figured out how to get around it. This is due to certain elements and their styles. As it was resolved, I narrowed it down to a few “offensive” HTML elements. Removing width: 100%; from some CSS elements and styles, as well as other static widths, such as width: 120px; will begin to reduce the problem. I say “start to decrease” because the margin on the right has become smaller, but has not completely disappeared. Then I started playing with other CSS attributes like margin and padding. After eliminating some left and right additions from some elements, the problem finally disappeared. But this was not entirely acceptable, as these styles were for some reason.

The solution was to wrap everything in a container element whose size matched and set overflow: hidden; in CSS. Setting overflow: hidden; body tags or html will work too, but it did funky vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.

As I said, I think this is a bug in Safari. When turning from Landscape to portrait, everything should be changed in accordance with the portrait orientation mode. Visually, everything looks as if it was changed correctly. However, Safari must have thought that something had not been changed correctly, so it showed the page wider than it actually was. This works great in Chrome on an Android device. I also added various background colors and borders to highlight which element can cause the page to stretch beyond the width of the device’s screen. Visually, there was no clear culprit.

If you think this could be a width: 100% plus padding problem, I had the same thought. But when removing either the width or the field / stock separately, a problem that it was not had to be fixed. Not a single item sat at the edge of the screen. There was an empty place.

Answer 2

The meta tag will help determine the rules for the viewport, but you still need to apply a visual style to change the orientation. Try these CSS values:

 body { width: 100%; height: 100%; } 

If you need a good resource to help you continue your project, PhoneGap has a GitHub starter app that you can use. PhoneGap Launch