关于手机显示web页面样式笔记

1、禁止页面缩放，在header头加上：

IOS：

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5,maximum-scale=0.5, user-scalable=0" />

Android：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=0" />

2、div边框圆角，整个div居中显示，内2个li并行

<style>

.midd{ width: 78%; margin-left: auto;margin-right: auto;}

.linediv{
    border:2px solid black;
    border-color: #C1C1C0;
    width:100%;
    height:70px;
    margin-top: 25px;
    background:#FAF9F6;
        /*圆角*/
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.linediv ul{
    width:95%;
}
.linediv ul li{
    /*li同一行*/
    list-style-type :none;
    width:50%;
    float:left;
    margin-bottom:15px;
}

.text_r{ margin-right: 40px; text-align: right;}

</style>

        <div class="midd">
                <div class="linediv">
                <ul>
                    <li>左边标题</li>
                    <li class="userInfo"><div class="text_r">右边数值</div></li>
                </ul>
             </div>
        <div>
        </div>
    </div>

3、底部固定div，有透明

<style>

#bottomBanner{ width:100%;background:#D77E00;text-align: center;opacity: 0.8;filter:alpha(opacity=80);height:80px;line-height:80px; overflow:hidden; position:fixed; bottom:0;left:0; }
#commit{ width:100%; height: 50px; text-align: center; font-size: 28pt; background-color: #D77E00; color:#ffffff;}
.input_text_without_border{ border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;}
</style>
        <div id="bottomBanner">
            <a id="commit" href="#"  class="input_text_without_border"><div>div按钮</div></a>
        </div>