Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
344 views
in Technique[技术] by (71.8m points)

css的浮动会导致在手机端body宽度缩减的问题

页面代码如下:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试</title>
        <style>
            body{background-color: #09c;}
            .w{width: 1200px;margin:20px auto;background-color: #fff;}
            .fl{float: left;}.fr{float: right;}
            .clearfix::after{display:table;content:" ";clear:both;}
            .test-box{background-color: #fff;}
        </style>
    </head>
    <body>
        <div class="w clearfix">
            <div class="fl">1111</div>
            <div class="fr">222</div>
        </div>
        
        <div class="test-box">1111</div>
    </body>
</html>

手机端打开看会发现html和body的宽度缩小了,设置100%也不行。
11.png
请问这是哪里造成的问题?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

找到解决方案了,body要设置min-width:1200px;
真特么的反直觉。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...