Question

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

这不是使解释更复杂，而是指向sample page where this behaviour is occurring的链接。查看iPhone，然后查看the home page which does not have this issue。

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

Answer 1

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

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

Answer 2

我有同样的问题，我通过设置修复它：

html, body { width:100%;  overflow:hidden; }

Answer 3

当任何分区的宽度大于iPAD屏幕的宽度时，会出现此问题。

在我的情况下，一些分区的大小为1000px，所以我只去width:auto并且它有效。 overflow-x:hidden也做同样的事情，但不是首选方式。

Answer 4

我没有iphone来测试这个，但我遇到过与我过去创建的网站类似的东西。在我的情况下，因为在从一个港口到另一个陆地时，safari移动设备中存在一个与规模混淆的错误。

以下代码为我修好了（不记得我现在从哪里得到它）

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Answer 5

使用“overflow-x：hidden”解决了问题的一部分，但是用旋转的方式解决了这个问题（正如Jason所说）。

有时，最困难的部分是发现造成问题的原因。在我的情况下，几个小时后，如果发现问题出现在Twitter的Bootstrap中：

如果您使用Twitter的Bootstrap和表单的“控制组”区域，问题可能就在那里。在我的情况下，我解决了问题：

.control-group .controls {
     overflow-x: hidden
 }

现在右边的白色空间消失了：）

Answer 6

我想补充Navneet Kumar的解决方案，因为它对我有用。任何宽度= 100％样式的div标签都不能有左边或右边的填充。移动浏览器（我注意到iPhone和Android设备上的问题）将div解释为宽度大于100％，从而在右侧创建了额外的空间。（我知道这有关固定宽度，但不是百分比宽度。）而是使用width = auto和padding。

Answer 7

我知道它已经有一段时间了，因为这个主题已经打开，但我遇到了类似的情况，发现这是因为我有一个元素，屏幕上隐藏着以下属性right: -999999px; position: absolute;。

将上述内容更改为left: -999999px; position: absolute;解决了OP所遇到的相同问题（右侧的白色屏幕和向右滑动的功能）。

Answer 8

我使用的是Bootstrap 3.3。我尝试了所有这些解决方案，但没有任何效果。然后，我将< div class =＆＃34;容器＆＃34; >更改为< div class =＆＃34; container-fluid＆＃34; >在我遇到麻烦的部分。这解决了这个问题。

Answer 9

我尝试了所有建议，没有任何作用。然后我重新确定它与页面的比例连接。那么我在我的主题文件夹中添加了<meta name="viewport" content="width=device-width, initial-scale=1.0">到header.php，这是固定的问题。

Answer 10

似乎结果因不同情况而异，但整个网站

html，body {width：100％;的x溢出：隐藏; }

似乎对我有用了！

Answer 11

固定！有类似的问题。通过将宽度设置为当前设备宽度来修复它。

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;

}

Answer 12

已解决¡

由于安装了protostar joomla模板3.X并开始在模块K2中添加内容，我注意到在右侧有一个空白区域的恼人滚动，尤其是在iphone中可见。

给了Eva Marie Rasmussen一个正确的部分答案，在文件template.css中添加了body标签这些值：

    Public class MainActivity extends AppCompatActivity{
 public static String BROADCAST_ACTION = "SMSCOMING";
    private BroadcastReceiver broadcastReceiver = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
            final Bundle bundle = intent.getExtras();
            try {
                //Getting the data d
                    triggerFunc(d);
                    }
                }
            } catch (Exception e) {
                Log.e(TAG, "Exception: " + e.getMessage());
            }
        }
    };

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
     IntentFilter filter = new IntentFilter();
        filter.addAction(BROADCAST_ACTION);
        this.registerReceiver(this.broadcastReceiver, filter);
}

void triggerFunc(data d){
   //Do some stuff
}

    }

但这种解决方案只是局部的。搜索导致此问题的div类或标签，并且一旦检测到在templete.css文件中添加该类的相同值：

width: auto;
overflow-x: hidden;

在我的情况下，将这两行添加到“span”类中，最后看起来像这样：

width: auto;
overflow-x: hidden;

现在正在工作

iPhone上的响应式网站 - 从景观到肖像旋转的不需要的白色空间

12 个答案: