Question

我希望你们能帮助我，因为我似乎无法将这个包裹起来。我建立了一个单页网站，工作正常，除了一件事，这是溢出-x：隐藏在平板电脑视口（也可能是智能手机，还没有测试过）

尽管身体有body {overflow-x:hidden;}在PC上的普通浏览器中工作正常，但我可以向左侧移动大约25个像素左右，导致我旋转的div溢出，屏幕，我想隐藏。

有没有办法解决这个问题？我提供了部分头部和html / css

视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

应用于媒体查询的CSS及其溢出的各个元素

@media only screen and (max-width: 992px){
    #skills, #experience    {overflow-x:hidden;}
}
@media (max-width: 479px){
    body                    {overflow-x:hidden;}
}

常规CSS应用于html / body标签

body, html  {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}

id #skills和#experience有一个名为.hoek的类，其定义如下，导致溢出。

    .hoek    {margin: 0 -50px; 
              -webkit-transform-origin:left center; 
              -moz-transform-origin:left center; 
              -o-transform-origin:left center; 
              -ms-transform-origin:left center;
              margin-top: -175px;                       
              -webkit-transform:rotate(5deg); 
              -moz-transform:rotate(5deg); 
              -o-transform:rotate(5deg); 
              -ms-transform:rotate(5deg);
              z-index: 20;
    }

我必须指出，我认为#skills和#experience是sections而不是div。我不确定这可能是代码中的问题，但我不这么认为。如果有更多信息需要，请告诉我，但我认为我已经覆盖了这里的基础。

我不知道从小提琴开始，所以我只提供网站的测试链接：http://www.jellyfishwebdesign.nl/Joost/index.php

Answer 1

实际上在堆栈溢出处找到答案：

移动设备上的浏览器会忽略overflow-x:hidden和body标记中的html，因此我在body标记中创建了一个包装，其中包含{{1在其中解决问题。

文档：

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

糟糕的是，它阻止了现在使用jquery插件，滚动....

Answer 2

尝试设置minimum-scale=1而不是maximum-scale=1。

minimum-scale控制用户可以缩放的距离，而maximum-scale控制他们可以缩放的距离。为了防止查看溢出，您需要限制用户缩小的能力，而不是。

Answer 3

尝试设置 minimum-scale=1 而不是 maximum-scale=1 或 initial-scale=1。

例如

<meta name="viewport" content="width=device-width, minimum-scale=1.0">

Answer 4

我发现申请：

overflow-x: hidden

到主体内部的div包装器使iOS上的滚动有点跳跃，因此只是给它overflow: hidden并让身体看得见。在我需要的所有浏览器和设备中，这对我来说非常适合。

Answer 5

Dorvalla指出，body和html标签在智能手机浏览器中会被忽略，尽管在“大屏幕”浏览器中却不会，我使用页面结构的第一个子元素解决了该问题，因此不需要额外的包装器。

例如对于我的WordPress案例：

    .site {
        overflow-x: hidden;
        /* Unnecessary IMHO, uncomment next line to force hidden behavior */
        /* overflow-x: hidden !important; */
        /* Additional tunning proposed by the community */
        position: relative;
        width: 100%;
    }

Answer 6

如果您将overflow-x:hidden应用于 body ，您可能也想申请h tml 。

  body,html {
overflow-x:hidden;
}

溢出 - X：隐藏;在移动设备上无法正常工作

6 个答案: