【问题标题】:Webpage x-scrollable on iOS Safari网页可在 iOS Safari 上滚动
【发布时间】:2016-09-29 22:49:28
【问题描述】:

我昨天问this question 我的页面在哪里可以水平滚动,原因不明。使用"overflow-x:hidden"; 可以防止页面出现这种情况(尽管我更愿意知道为什么会溢出)。

遗憾的是,这在 iOS Safari 上不起作用,我仍然可以向右滚动。

Here 是指向该站点的链接。我目前正在使用overflow-x:auto;,因为我希望有人可能会发现为什么会有任何溢出的内容,而且非常感谢任何关于如何处理移动 safari 的想法。

【问题讨论】:

    标签: html css


    【解决方案1】:

    我检查了您的网站,发现您有一个带有margin-right:5em; 的元素,因此请为移动视图编写一个媒体查询并将其设为0; 在你的 MyHeaders.css 行号 8 中更改它

    #companyName {
        font-size: 3em;
        margin-right: 5em;
    }
    

    在移动视图中将其更改为 0

    【讨论】:

    • 使用@media (max-width:540px){ #companyName { margin-right: 0em; }}
    • 公司名...现在我看到了...非常感谢!
    【解决方案2】:

    在标题上添加此元:

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

    body 内创建一个站点包装器div 并将overflow-x:hidden 应用到该包装器而不是bodyhtml 可解决此问题。

    【讨论】:

    • 很好的解决方案 :) 尽管发现并修复了“坏元素”(#companyName),但我会添加这个。
    猜你喜欢
    • 1970-01-01
    • 2012-04-05
    • 1970-01-01
    • 2021-12-09
    • 1970-01-01
    • 1970-01-01
    • 2022-06-12
    • 2019-10-31
    • 1970-01-01
    相关资源
    最近更新 更多