css 使用iPhone时,网站上出现水平滚动

sczxawaw  于 2023-10-21  发布在  其他
关注(0)|答案(4)|浏览(144)

我的网站http://dsmedvednikov2.zzz.com.ua/的移动的版本有问题。无论使用Safari还是Google Chrome浏览器,使用iPhone或iPad时都会出现水平滚动条。在Android设备上一切正常。有人能给我给予吗?

cgyqldqp

cgyqldqp1#

你可以通过添加这个Meta标签来限制用户停止在你的网站上缩放/收缩:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

或者,如果它是一个非常分钟的x滚动效果,你可以使用以下小技巧:

body    {
    overflow: hidden;
    overflow-y: auto;
    }

它将停止任何水平滚动效果。

8nuwlpux

8nuwlpux2#

看起来是css页面把这个弄得一团糟。即使在Safari上我的Mac得到同样的问题。请确保您的CSS。
据我所知,我浏览了你的页面x1c 0d1x的CSS属性
这就是问题的根源如果您使用%而不是'px'将更好地解决您的问题。
谢谢!继续编码。

pinkon5k

pinkon5k3#

如果使用固定宽度,则可能会导致问题。使用**
宽度:100%

**

uqxowvwt

uqxowvwt4#

如果输入元素的大小小于16像素,iOS浏览器将自动缩放输入元素。

@media (max-width:500px) {

    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select:focus,
    textarea {
        font-size: 16px !important;
    }
}

相关问题