html - 网页在 Iphone 7 中水平移动

Question

我看到当用户滚动页面时，网站主页会水平移动。 以下是网址: https://tandcity.dk/da/

我试过下面的 CSS

body{
overflow: hidden;
}

html{
overflow: hidden;
}

我添加了一些元标记。您可以检查查看源代码。

谁能帮我解决这个问题。

Answer 1

从正文标签中删除:

body {
/* overflow: hidden; */
/* width: 100vw; */
/* height: 100vh; */
}

对于移动设备:

在这个类上 .vc_grid.vc_row.vc_grid-gutter-15px .vc_pageable-slide-wrapper 删除 margin-right: -15px 替换为 margin-右:0px 如果你愿意的话。

将 .vc_grid.vc_row.vc_grid-gutter-15px .vc_grid-item , padding-right: 15px; 替换为 padding-right: 0px 之后;

请记住，要使此移动更改生效，您必须将其添加到 @media 查询中。

示例:在您添加自定义 css 的地方，将其添加到结束标记之前

@media (max-width: 480px) { 

   .vc_grid.vc_row.vc_grid-gutter-15px .vc_pageable-slide-wrapper {
       margin-right: 0px;
 }

  .vc_grid.vc_row.vc_grid-gutter-15px .vc_grid-item {
      padding-right: 0px;
 }

}

对于 iPhone 7 :

/* Portrait and Landscape */
  @media only screen 
   and (min-device-width: 414px) 
   and (max-device-width: 736px) 
   and (-webkit-min-device-pixel-ratio: 3) { 

   .vc_grid.vc_row.vc_grid-gutter-15px .vc_pageable-slide-wrapper {
       margin-right: 0px;
 }

  .vc_grid.vc_row.vc_grid-gutter-15px .vc_grid-item {
      padding-right: 0px;
 }
}