移动端兼容问题

今天来整理一下最近遇到的移动端兼容问题。

1、背景图片自适应：

a  我用的设了一个div，用js设置宽度：

<div class="bgImg">
    <img src="~/Content/themes/newbg.jpg" />
</div>

<script>
    $(document).ready(function () {
        $(".bgImg img").width(document.body.clientWidth.toString());
    })</script>

css中这样设置：

 .bgImg {
        z-index: -2;
        position: absolute;
        background-image:url("~/Content/themes/newbg.jpg")
    }
        .bgImg img {
            min-height:720px;
            max-height:800px;
        }

b直接用background-image，设置100%；

2、用以img标签做背景图片的时候有bug，是ie带的图片之间的一个间隙~~~（大家说是ie的bug 为啥我的chrome也遇到了呢~~）

会产生一个3px的下什么~~设置margin 和padding 和border都无效好么~~

记得在图片属性上加：

display：block;

3、iOS系统很麻烦，有它自带的按钮、文本框样式，但是真的很丑！！！！！！！

所以我们开发iOS的网站时，一定要屏蔽  一定要！我之前不知道，丢脸丢大了~~~~

input[type='text'] {
            -webkit-appearance: none;
            resize: none;
        }

4、给按钮 文本框什么的加圆角也很简单啊，以前以为兼容度不高呢，但是现在发现挺实用的啊

input[type='text'] {
            border: 1px #999 solid;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            padding: 0 0 1px 10px;
        }

5、开发移动端的时候，这个头不能少哦不能少！

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />