iPhone上的响应式网站-从横向旋转到纵向时不需要的空白

Responsive website on iPhone - unwanted white space on rotate from landscape to portrait(iPhone上的响应式网站-从横向旋转到纵向时不需要的空白)

问题描述

我正在创建一个响应式网站，并且刚刚注意到在 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

这里没有使解释进一步复杂化，而是指向 发生此行为的示例页面.在 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上的响应式网站-从横向旋转到纵向时不需要的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！