移动端适配（1）——viewport设置与初始化css

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.5,minimum-scale=0.5,maximum-scale=1">(灰色部分可以不写)

viewport 视口（可视区窗口）

默认不设置viewport一般可视区宽度在移动端是980

width 可视区的宽度（number||device-width)

user-scalable 是否允许用户缩放(yes||no) 注：ios10无效

initial-scale 初始缩放比例 minimun-scale 最小缩放比例（initial-scale与minimum-scale是需要保持一致的） maximum-scale 最大缩放比例注意：ios10最大缩放比例无效

像素比：

　　alert(window.devicePixelRatio);

//n=window.devicePixelRatio;

　　//像素比把一个像素放大至N个像素去显示

　　//设计图最少750

</script>

QQ浏览器强制竖屏还是横屏显示：portrait--竖屏 landscape--横屏

QQ浏览器全屏显示

UC强制竖屏或横屏显示

UC全屏显示

禁止识别电话号码和QQ

拨打电话与发送邮件

<a href="tel:15371469791">请拨打电话15371469791</a>

<a href="mailto:284811638@qq.com">请发送邮件</a>

移动端问题解决:

body{

　　font-family:Helvetica;

}

body * {

　　-webkit-text-size-adjust:100%;/*禁止文字缩放*/

　　-webkit-user-select:none;

}

a,input,button{

-webkit-tap-highlight-color:rgba(0,0,0,0);/*清除点击阴影*/

}

input,button{

　　-webkit-appearance:none;/*清除按钮圆角*/

　　border-radius:0;

}

</style>

移动端其他问题：

1.Font Boosting ：在一段文字我们没有给它设置高度的时候在webkit内核下文字的大小被浏览器放大了

　　解决办法:

　　　　1.设置高度

　　　　2.设置最大高度 max-height

2.Fixed : 固定定位不兼容

　　解决办法：

　　<style>

　　　　html{

　　　　　height:100%;

　　　　　overflow:hidden;

　　　　　position:relative;

　　　　}

　　　　body{

　　　　　height:100%;

　　　　　margin:0;

　　　　　overflow:auto;

　　　　}

　　　　header{

　　　　　　position:absolute; /*用绝对定位去模拟固定定位，把html的滚动条隐藏，将滚动条加在body身上，根据html去定位*/

　　　　　　width:100%;

　　　　　　height:40px;

　　　　　　background:rgba(0,0,0,0.5);

　　　　　　color:#fff;

　　　　}

　　　　section{

　　　　　　padding-top:40px;

　　　　}

　　</style>

　　　　　　页面内容<br/>

　　　　　　　　。。。。。。

　　　　</section>

3.IOS的body的overflow之后还是可以横向滚动

　　解决办法：

　　<style>

　　　　html{

　　　　　height:100%;

　　　　　overflow:hidden;

　　　　}

　　　　body{

　　　　　height:100%;

　　　　　margin:0;

　　　　　overflow:hidden;

　　　　　position:relative;

　　　　}

　　　　#wrap{

　　　　　height:100%;

　　　　　overflow:auto;

　　　　}

　　　　header{

　　　　　position:absolute;

　　　　　width:200%;

　　　　　height:40px;

　　　　　background:rgba(0,0,0,0.5);

　　　　　color:#fff;

　　　　　text-align:center;

　　　　}

　　　　section{

　　　　　　padding-top:40px;

　　　　}

　　</style>

　　<div id="wrap"> //包一个div,根据body定位　　　

　　　　　　页面内容<br/>

　　　　　　。。。。。。

　　　　</section>

　　</div>

巴特西

移动端适配（1）——viewport设置与初始化css

最新文章

热门文章