欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动端常见的一些问题

程序员文章站 2024-01-24 19:54:22
...

1、视口设置viewport  'width=device-width'

2、像素比 devicePixelRatio

3、常用meta设置

移动端常见的一些问题

禁止识别电话号码

<meta name='format-detection' content="telephone=no,e-mail=no" />

拨打电话和发邮件

href = 'tel:'     href='mailto:'

移动端常见的一些问题

清除点击阴影

 -webkit-tap-highlight-color: 颜色值

清除按钮圆角

-webkit-appearance:none

boder-radius:0;

默认字体:

所有设备都会有的英文字体:Helvetica  这个就够用了

文字缩放

-webkit-text-size-adjust:100%;

选中的文字

-webkit-user-select:none;  //在事件中再兼容安卓

其他问题

font-boosting   //文字过小,自动放大,人性化的设置,一段我们没有给它设置高度的时候,在webkit内核下,会被自动放大

解决方法: 1、设置高度

                 2、设置最大高度,max-height

干掉页面的额滚动条

html{height:100%,overflow:auto;}

移动端常见的一些问题

body能左右拖动的问题,在body下面嵌套一个div{height:100%;overflow:auto}

适配的问题

% 高度不好确定

viewport initial-scale = 1.0

通过jq生成viewport  

var $w = window.srceen.width

var targetW = 320;

var meta = document.createElement('meta');

meta.name = 'viewport';

meta.content = '.......'

var scale =  $w/targetW

document.head.appendChild(meta)

rem适配

/*移动端默认样式css.css*/
*{
  margin:0;
  padding:0;
}
html,body{
  width:100%;    /*滚动条的设置*/
  height:100%;
  overflow: hidden;
}
a,input,button{
  -webkit-tap-highlight-color: raga(0,0,0,0);
}
input,button{
  -webkit-appearance: none;
  border-radius:0;
}
body{
  margin : 0;
  -webkit-user-select: none;
}
body *{
  -webkit-user-select: none;
  font-family: Helvatica;
}
body{
  -webkit-text-size-adjust:100%;
}
ul{
  list-style: none;
}
img{
  border:0;
  vertical-align: top;
}
@r : 50rem ;
#header{
  height: 103/@r;
  background:#ef3239;
  position: absolute;
  width:750/@r;      /*滚动条的设置*/
  top:0;
  left:0;
  border-bottom: 1px solid #a82d31;
  a{
    width: 128/@r;
    height:88/@r;
    position: absolute;
    top:0;
    color:#fff;
    text-align: center;
  }
  #task{
    left:0;
    span{
      font-size: 37/@r;
      line-height: 88/@r;

    }
  }
  h1{
    text-align: center;
    font-size:39/@r;
    color:#fff;
    line-height: 88/@r;
    margin:0;
    span{
      font-size:26/@r;
      margin-right:16/@r;
    }
  }
  #refresh{
    right:0;
    span{
      font-size: 36/@r;
      line-height: 88/@r;
    }
  }
  span{
    color:#fff;
  }
}

#nav{
  height:105/@r;
  width:750/@r;
  position: absolute;    /*滚动条的设置*/
  top:103/@r;
  background: #fdfdfd;
  border-top : 1px solid #b0b0b0;
  border-bottom:1px solid #ccc;
  box-sizing : border-box;
  a{
    float: left;
    width:25%;
    text-align: center;
    height:103/@r;
    font-size:35/@r;
    line-height:103/@r;
    color:#848689;
    vertical-align: middle;
  }
  .active{
    color: #f23838;
    span{
      font-size:36/@r;
    }
  }
  #spanBox{
    width:37/@r;
    display: inline-block;
    vertical-align: middle;
    span{
      float:left;
      font-size:26/@r;
    }
    .glyphicon-chevron-down{
       top:-3/@r;
    }
    .glyphicon-filter{
      font-size : 37/@r;
    }
  }
}
#wrap{
  position: absolute;
  top:208/@r;
  left:0;      /*滚动条的设置*/
  right:0;
  bottom:0;
  overflow: auto;
}
#list{
  li{
    height:278/@r;
    border-bottom:1px solid #e0e0e0;
    box-sizing: border-box;

  }
  a{
    padding : 23/@r 23/@r 22/@r;
    height:235/@r;
    display: block;

  }
  img{
    width:235/@r;
    height:235/@r;
    float: left;
  }
  .spanWrap{
    float: right;
    width:432/@r;

  }
  .sTitle{
    font-size:28/@r;
    line-height:44/@r;
    color:#333;
    margin-top:5/@r;
    display: block;
  }
  .sPrice{
    display: block;
    font-size:38/@r;
    line-height:64/@r;
    margin-top:31/@r;
    color: #bb0d02
  }
  .sComment{
    font-size:28/@r;
    line-height: 47/@r;
    display: block;
    color:#808080;
  }
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name='format-detection' content="telephone=no,e-mail=no" />
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/css.css">
    <script>
        window.onload = function(){
            var html = document.documentElement;
            var hWidth = html.getBoundingClientRect().width;
            html.style.fontSize = hWidth/15 + 'px';
        }
    </script>
</head>
<body>
    <div id="header">
        <a id="task" href="javascript:;"><span class="glyphicon glyphicon-tasks"></span></a>
        <h1><span class="glyphicon glyphicon-lock "></span>我的商城</h1>
        <a id="refresh" href="javascript:;"><span class="glyphicon glyphicon-refresh"></span></a>
    </div>
    <nav id="nav">
        <a href="javascript:;" class="active">综合<span class="glyphicon glyphicon-chevron-down"></span></a>
        <a href="javascript:;">销量</a>
        <a href="javascript:;">价格
            <span id="spanBox">
                <span class="glyphicon glyphicon-chevron-up"></span>
                <span class="glyphicon glyphicon-chevron-down active"></span>
            </span>
        </a>
        <a href="javascript:;" >筛选<span class="glyphicon glyphicon-filter"></span></a>
    </nav>
    <section id="wrap">
        <ul id="list">
            <li>
                <a href="javascript:;">
                    <img src="./img/timg.jpg" alt="">
                <span class="spanWrap">
                    <span class="sTitle">苹果(iphone) 16GB 金色 移动联通电信4G手机</span>
                    <span class="sPrice">¥4888.00</span>
                    <span class="sComment">好评96% 59091</span>
                </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/timg.jpg" alt="">
                <span class="spanWrap">
                    <span class="sTitle">苹果(iphone) 16GB 金色 移动联通电信4G手机</span>
                    <span class="sPrice">¥4888.00</span>
                    <span class="sComment">好评96% 59091</span>
                </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/timg.jpg" alt="">
                <span class="spanWrap">
                    <span class="sTitle">苹果(iphone) 16GB 金色 移动联通电信4G手机</span>
                    <span class="sPrice">¥4888.00</span>
                    <span class="sComment">好评96% 59091</span>
                </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/timg.jpg" alt="">
                <span class="spanWrap">
                    <span class="sTitle">苹果(iphone) 16GB 金色 移动联通电信4G手机</span>
                    <span class="sPrice">¥4888.00</span>
                    <span class="sComment">好评96% 59091</span>
                </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/timg.jpg" alt="">
                <span class="spanWrap">
                    <span class="sTitle">苹果(iphone) 16GB 金色 移动联通电信4G手机</span>
                    <span class="sPrice">¥4888.00</span>
                    <span class="sComment">好评96% 59091</span>
                </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/timg.jpg" alt="">
                <span class="spanWrap">
                    <span class="sTitle">苹果(iphone) 16GB 金色 移动联通电信4G手机</span>
                    <span class="sPrice">¥4888.00</span>
                    <span class="sComment">好评96% 59091</span>
                </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/timg.jpg" alt="">
                <span class="spanWrap">
                    <span class="sTitle">苹果(iphone) 16GB 金色 移动联通电信4G手机</span>
                    <span class="sPrice">¥4888.00</span>
                    <span class="sComment">好评96% 59091</span>
                </span>
                </a>
            </li>
        </ul>
    </section>
</body>
</html>

移动端常见的一些问题

rem  就是根节点 html, 根据根节点的字体大小进行计算

html{font-size:16px} 1rem = 16px;

js 设置字体大小

$(function(){
    var html = document.documentElement;
    var hWidth = html.getBoundingClientRect().width;
    html.style.fontSize = hWidth/16 + 'px';
})

body内的rem换算是字号大小/hWidth/16

弹性盒模型

新版的flex 和老版的box(移动端暂时不支持新版的flex)

移动端常见的一些问题移动端常见的一些问题

移动端常见的一些问题移动端常见的一些问题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>Document</title>
    <script>
        window.onload = function(){
            var html = document.documentElement;
            var hWidth = html.getBoundingClientRect().width;
            html.style.fontSize = hWidth/15 + 'px';
            //1rem = 50px;
        }
    </script>
    <style>
        /*移动端默认样式*/
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;    /*滚动条的设置*/
            height:100%;
            overflow: hidden;
        }
        a{
            text-decoration: none;
        }
        a,input,button{
            -webkit-tap-highlight-color: raga(0,0,0,0);
        }
        input,button{
            -webkit-appearance: none;
            border-radius:0;
        }
        body{
            margin : 0;
            -webkit-user-select: none;
        }
        body *{
            -webkit-user-select: none;
            font-family: Helvatica;
        }
        body{
            -webkit-text-size-adjust:100%;
        }
        ul{
            list-style: none;
        }
        img{
            border:0;
            vertical-align: top;
        }
        .rows{
            display: -webkit-box;
            display: flex;
        }
        .rows div{
            -webkit-box-flex: 1;
            flex-grow: 1;
            width:0; /*不会影响flex-grow*/
        }
        .rows div a{
            font-size:0.44rem;
            color:#666;
            text-align: center;
            line-height: 1.04rem;
            display: block;
        }
        .rows div a:before{
            content:'';
            display: block;
            margin:0 auto;
            width:1.9rem;
            height:1.70rem;
            background-image:url('img/1.png');
            background-size: 1.90rem 1.70rem;
        }
        .rows:nth-of-type(1) div:nth-of-type(1) a:before{
            background-image:url('img/1.png');
        }
        .rows:nth-of-type(1) div:nth-of-type(2) a:before{
            background-image:url('img/2.png');
        }
        .rows:nth-of-type(1) div:nth-of-type(3) a:before{
            background-image:url('img/3.png');
        }
        .rows:nth-of-type(1) div:nth-of-type(4) a:before{
            background-image:url('img/4.png');
        }
        .rows:nth-of-type(1) div:nth-of-type(5) a:before{
            background-image:url('img/5.png');
        }
        .rows:nth-of-type(2) div:nth-of-type(1) a:before{
             background-image:url('img/6.png');
         }
        .rows:nth-of-type(2) div:nth-of-type(2) a:before{
            background-image:url('img/7.png');
        }
        .rows:nth-of-type(2) div:nth-of-type(3) a:before{
            background-image:url('img/8.png');
        }
        .rows:nth-of-type(2) div:nth-of-type(4) a:before{
            background-image:url('img/9.png');
        }
        .rows:nth-of-type(2) div:nth-of-type(5) a:before{
            background-image:url('img/10.png');
        }

    </style>
</head>
<body>
    <div class="rows">
        <div><a href="javascript:;">天猫</a></div>
        <div><a href="javascript:;">聚划算</a></div>
        <div><a href="javascript:;">天猫国际</a></div>
        <div><a href="javascript:;">外卖</a></div>
        <div><a href="javascript:;">天猫超市</a></div>
    </div><div class="rows">
        <div><a href="javascript:;">充值中心</a></div>
        <div><a href="javascript:;">飞猪旅行</a></div>
        <div><a href="javascript:;">领金币</a></div>
        <div><a href="javascript:;">拍卖</a></div>
        <div><a href="javascript:;">分类</a></div>
    </div>
</body>
</html>

移动端常见的一些问题

利用Less和Koala来计算rem

怪异盒模型

box-sizing:border-box(包容了边框)

媒体查询

移动端常见的一些问题