iPhone上的响应式网站 - 从景观到肖像旋转的不需要的白色空间 [英] Responsive website on iPhone - unwanted white space on rotate from landscape to portrait

问题描述

我正在创建一个响应式网站，并且在iPhone上查看时，我发现内容页面中存在奇怪的行为。在纵向模式下加载时，以及旋转到横向时，它可以正确缩放。然而，当旋转回到肖像时，页面似乎向左移动，或者没有正确缩放，并且在右侧有一条白色空间。当用户可以向左滑动页面时，这个空白空间似乎也出现在第一次加载中。

I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left

这不是使解释更复杂，这里是一个<的链接a href =http://learnline-dev.cdu.edu.au/chn-test/lesson1/initials/initials-ex1.html>示例页面，此行为正在发生。查看iPhone，然后查看没有此问题的主页 。

Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.

如果你需要进一步了解，请知道：）

If you need to see anything further, just me know :)

推荐答案

修正了它！问题来自一个特定的div - 发现它，这是一个删除不同元素的过程，直到问题消失。

Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.

要修复它，我需要将 overflow-x：hidden 添加到该div中，然后将其排序！希望这对有类似问题的其他人有用。

To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.

这篇关于iPhone上的响应式网站 - 从景观到肖像旋转的不需要的白色空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！