html安卓手机打开后只有半屏,宽度设置100%在移动端时变成一半
生活随笔
收集整理的這篇文章主要介紹了
html安卓手机打开后只有半屏,宽度设置100%在移动端时变成一半
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html代碼：
- 手機
- 電腦
- DIY
- 數碼
- 外設
- 智能
css代碼：
.nav-body{
position: relative;
overflow: hidden;
width:100%;
height: 400px;
}
.nav-img{
position: absolute;
z-index:-1;
}
.nav-img a{
display: block;
width:100%;
}
.nav-img img{
height: 400px;
width:100%;
min-width: 1920px;
}
.nav-warpper{
width:1200px;
margin: 0 auto;
}
.nav-menu{
display: inline-block;
width:150px;
height: 400px;
background: #666;
z-index: 2;
}
.nav-menu li{
display: inline-block;
width:150px;
padding:15px 0;
border-top:1px solid #e6e6e6;
}
.nav-menu li:hover{
background: #ec3639;
}
pc端效果：
Iphone6/7/8效果：
補充：使用了viewport
最后：為什么后出現這種問題，怎么解決？
總結
以上是生活随笔為你收集整理的html安卓手机打开后只有半屏,宽度设置100%在移动端时变成一半的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 服务器中文件设置密码,共享服务器文件权限
- 下一篇： linux 负载命令,通过Linux命令