overflow-x：hidden不能在移动设备上运行 [英] overflow-x:hidden is not working in mobile

问题描述

我设计了一个响应式网站，可以在PC上的Windows浏览器中正常工作，但它在平板电脑模式或移动宽度的右侧显示额外的水平空间

如何删除此因为overflow-x ：隐藏不在那里工作。

i have designed a responsive website that works fine in windows browser on pc but it shows extra horizontal space at right side in tablet mode or in mobile width
how can i remove this because overflow-x:hidden is not working there.

推荐答案

我在使用bootstrap时遇到了这个问题。您是否尝试过使用媒体查询来定义移动设备和平板电脑的屏幕尺寸？例如

Hi,

I had this issue when using bootstrap. Have you tried using media queries to define a mobile and tablet screen size? For example

/* ----------- iPhone 6 ----------- */

@media screen and (max-width: 375px) {
    body {
        overflow: hidden;
    }
}

/* ----------- iPad mini ----------- */

@media screen and (max-width: 768px) {
    body {
        overflow: hidden;
    }
}

您还可以考虑添加！媒体查询规则的重要标记，以覆盖可能导致此问题的任何其他CSS。

You could also consider adding an !important tag to the media query rules in order to overwrite any other CSS that may be causing this.

/* ----------- iPhone 6 ----------- */

@media screen and (max-width: 375px) {
    body {
        overflow: hidden!important;
    }
}

/* ----------- iPad mini ----------- */

@media screen and (max-width: 768px) {
    body {
        overflow: hidden!important;
    }
}

查看所有媒体的网址查询px大小 - https://css-tricks.com/snippets/css/media -queries-for-standard-devices / [ ^ ]





希望这会有所帮助！

See this url for all media query px sizes - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/[^]


Hope this helps!

这篇关于overflow-x：hidden不能在移动设备上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！