网站未以纵向视图覆盖全屏

问题描述 投票：0回答：3

我设计了响应式website，在笔记本电脑和landscape Tab和移动设备的视图中均能正常工作。

[当我检查人像视图中的主体标签未覆盖全屏时，在屏幕的右侧出现白色垂直带。

横向视图：

enter image description here

没有错误。。。工作完美...

纵向视图：

enter image description here

正文未覆盖整页。...

正文标签CSS：

 body{
   font-family: 'Raleway','Arial Narrow', serif;
    width: 100%;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: hidden;
    margin:0 !important ;
 padding:0 !important
    }
css responsive-design mobile-website
3个回答
1
投票

您已将box-sizing: content-box;用于类fs-container，即引起问题，其<body> 是覆盖了整个网站，但由于该类的属性为空白。

我用过这个CSS：

       @media screen and (max-width: 570px) {

          .fs-container {
              position: relative;
              width: 100%;
              padding: 0 20%;
              max-width: 100%;
              left: 35px;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
               box-sizing: border-box;
           }

            .fs-block {
               width: 100%;
            }

      }

     @media screen and (max-width: 380px) {

           .fs-container {
              padding: 0 15%;
           }

     }

特别是media-query，请尝试此操作，它将为您解决问题。

0
投票

我在开发人员工具中进行了检查，一切正常。

也许问题是您发布的代码：

 overflow-x: hidden;
 margin:0 !important ;
 padding:0 !important

请检查您的分号：

 overflow-x: hidden;
 margin:0 !important;
 padding:0 !important;
0
投票

确保您为margin和padding使用通用选择器。

* {
    margin: 0;
    padding: 0;
  }

有时会产生一些问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.