Html 移动浏览器会切断内容的底部，但可以在桌面浏览器中工作

底部在移动视图中不断被切掉，但在浏览器中即使调整了大小也非常好。我想也许媒体的问题没有得到解决，但看起来很好。我试着把

.square

放在

顶部，使其向上移动：-55%但它将仅在桌面浏览器中移动。由于某种原因，它不会在手机中移动

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

     /* Iphone */

     @media (min-width: 300px) and (max-width: 767px) {
        .project_miniwrap {
            min-width: 90%;
            top: 33%;
        }
        #tu {
            margin-top: 117px;
            margin-left: 235px
        }
        #dar {
            margin-top: 17px;
            margin-left: 25px
        }
        .square {
            color: #0D0D0D;
            font-family: 'NimbusSansNo5TOT-Medium';
            font-size: 38px;
            letter-spacing: -1px;
            display: block;
            margin: auto;
            position: absolute;
            top: -15%;
            left: 0;
            bottom: 0;
            right: 0;
            width: 295px;
            height: 160px
        }
        .l1,
        .l2,
        .l3,
        .l4 {
            position: absolute;
            background: transparent;
            width: 0px;
            height: 0px;
            background-color: black;
            color: #0D0D0D
        }
        .l1 {
            left: 0;
            bottom: 0;
            width: 8px
        }
        .l2 {
            top: 0;
            left: 0;
            height: 8px
        }
        .l3 {
            right: 0;
            top: 0;
            width: 8px
        }
        .l4 {
            bottom: 0;
            right: 0;
            height: 8px
        }
        .description {
            width: 90%
        }
        .snippet {
            display: block;
            width: 100%;
            line-height: 45px;
            margin-bottom: 10%;
            font-size: 36px
        }
        .main_description {
            display: block;
            width: 100%
        }
        #anchor-point {
            bottom: 90%;
            position: absolute
        }
        .anchor-point {
            bottom: 90%;
            position: absolute
        }
        #container {
            top: 30%
        }
    }
    @media (max-height: 479px) {
        #tu {
            margin-top: 117px;
            margin-left: 235px
        }
        #dar {
            margin-top: 17px;
            margin-left: 25px
        }
        .square {
            color: #0D0D0D;
            font-family: 'NimbusSansNo5TOT-Medium';
            font-size: 38px;
            letter-spacing: -1px;
            display: block;
            margin: auto;
            position: absolute;
            top: -15%;
            left: 0;
            bottom: 0;
            right: 0;
            width: 295px;
            height: 160px
        }
        .l1,
        .l2,
        .l3,
        .l4 {
            position: absolute;
            background: transparent;
            width: 0px;
            height: 0px;
            background-color: black;
            color: #0D0D0D
        }
        .l1 {
            left: 0;
            bottom: 0;
            width: 8px
        }
        .l2 {
            top: 0;
            left: 0;
            height: 8px
        }
        .l3 {
            right: 0;
            top: 0;
            width: 8px
        }
        .l4 {
            bottom: 0;
            right: 0;
            height: 8px
        }
    }


/*Iphone*/
@介质（最小宽度：300px）和（最大宽度：767px）{
.project_miniwrap{
最小宽度：90%；
最高：33%；
}
#屠{
边缘顶部：117px；
左边距：235px
}
#达尔{
利润上限：17像素；
左边距：25px
}
.广场{
颜色：#0d0d；
字体系列：“NimbusSansNo5TOT中等”；
字号：38px；
字母间距：-1px；
显示：块；
保证金：自动；
位置：绝对位置；
前-15%；
左：0；
底部：0；
右：0；
宽度：295px；
高度：160像素
}
.l1，
.l2，
.l3，
.l4{
位置：绝对位置；
背景：透明；
宽度：0px；
高度：0px；
背景色：黑色；
颜色：#0d0d
}
.l1{
左：0；
底部：0；
宽度：8px
}
.l2{
排名：0；
左：0；
高度：8px
}
.l3{
右：0；
排名：0；
宽度：8px
}
.l4{
底部：0；
右：0；
高度：8px
}
.说明{
宽度：90%
}
.片段{
显示：块；
宽度：100%；
线高：45px；
利润底部：10%；
字号：36px
}
.main_说明{
显示：块；
宽度：100%
}
#锚点{
底部：90%；
位置：绝对位置
}
.锚点{
底部：90%；
位置：绝对位置
}
#容器{
最高：30%
}
}
@介质（最大高度：479px）{
#屠{
边缘顶部：117px；
左边距：235px
}
#达尔{
利润上限：17像素；
左边距：25px
}
.广场{
颜色：#0d0d；
字体系列：“NimbusSansNo5TOT中等”；
字号：38px；
字母间距：-1px；
显示：块；
保证金：自动；
位置：绝对位置；
前-15%；
左：0；
底部：0；
右：0；
宽度：295px；
高度：160像素
}
.l1，
.l2，
.l3，
.l4{
位置：绝对位置；
背景：透明；
宽度：0px；
高度：0px；
背景色：黑色；
颜色：#0d0d
}
.l1{
左：0；
底部：0；
宽度：8px
}
.l2{
排名：0；
左：0；
高度：8px
}
.l3{
右：0；
排名：0；
宽度：8px
}
.l4{
底部：0；
右：0；
高度：8px
}
}

地点：


我认为它被切断了，因为视口高度不够大。由于您使用
top:35%定位
.project\u miniwrap
，它总是将其定位在距父对象顶部35%的位置，而不是位于中心

尝试使用此选项将div居中：

.project_miniwrap {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

如果您知道宽度和高度，则可以使用上述版本的更兼容版本，否则需要使用JavaScript将其居中

.project_miniwrap {
    top: 50%;
    left: 50%;
    width: 200px;
    height: 300px;
    margin-left: -100px;
    margin-right: -150px;
}

我认为它被切断是因为视口高度不够大。由于您使用
top:35%定位
.project\u miniwrap
，它总是将其定位在距父对象顶部35%的位置，而不是位于中心

尝试使用此选项将div居中：

.project_miniwrap {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

如果您知道宽度和高度，则可以使用上述版本的更兼容版本，否则需要使用JavaScript将其居中

.project_miniwrap {
    top: 50%;
    left: 50%;
    width: 200px;
    height: 300px;
    margin-left: -100px;
    margin-right: -150px;
}

.project\u miniwrap
不应影响飞溅位置。另外，我仍然不知道为什么在桌面浏览器中而不是在移动设备上，
.square
媒体查询会更改。您可能也想尝试为视口添加宽度，因为您正在设计页面，以便在多个设备屏幕上缩放
，我遵循了本指南。他们说不要使用那个宽度命令。我应该把它放进去吗？也许是因为浏览器的兼容性？如果您知道框的宽度和高度，可以使用
左边距：-（半宽）；页边顶部：-（半高）
，这是所有浏览器都应支持的更老、更兼容的方法。
.project\u miniwrap
不应影响启动位置。另外，我仍然不知道为什么在桌面浏览器中而不是在移动设备上，
.square
媒体查询会更改。您可能也想尝试为视口添加宽度，因为您正在设计页面，以便在多个设备屏幕上缩放
，我遵循了本指南。他们说不要使用那个宽度命令。我应该把它放进去吗？也许是因为浏览器的兼容性？如果您知道框的宽度和高度，可以使用
左边距：-（半宽）；页边顶部：-（半高）
，这是所有浏览器都应支持的更老、更兼容的方法。