什么都不说了，直接上代码。亲们自己贴下来测试
<!DOCTYPE html> <html lang="zh_cmn"> <head> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes,viewport-fit=cover"> <title>完美解决手机浏览器不支持fixed或者白屏</title> </head> <style> html, body { -webkit-text-size-adjust: none; -webkit-touch-callout: none; vertical-align: middle; -webkit-user-select: none; font-size: 16px; position: relative; font-family: "Helvetica Neue",Helvetica,STHeiTi,"Roboto Regular",Roboto,"Droid Sans","Microsoft Yahei",sans-serif; margin: 0; padding: 0; } body{ height: 100%; } .border-top:before{ display: block; position: absolute; right: 0; left: 0; border-top: 1px solid #e1e1e1; content: ' ' } .border-top { position: relative } .border-top:before { top: 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { .border-top:before, .border-bottom:after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); -webkit-transform-origin: left bottom } .border-top:before { -webkit-transform-origin: left top } } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .border-top:before, .border-bottom:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5) } } .nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9020; background: #ffc754 } .nav:before { border-top-color: #e9e9e9 } .btn{ overflow: hidden; height: 50px; text-align: center; white-space: nowrap; font-size: 0 } </style> </head> <body> <div class="nav border-top iphonex-bottom-fixed"> <ul class="btn"></ul> </div> <div> <img src="active.jpg" width="100%"/> </div> </body> </html>