移动端兼容问题

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

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" />
相关文章
相关标签/搜索