移动端适配
Posted fxyg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端适配相关的知识，希望对你有一定的参考价值。
<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最大缩放比例无效
像素比：
<script>
alert(window.devicePixelRatio);
//n=window.devicePixelRatio;
//像素比把一个像素放大至N个像素去显示
//设计图最少750
</script>
QQ浏览器强制竖屏还是横屏显示：portrait--竖屏 landscape--横屏
<meta name="x5-orientation" content="portrait"/>
QQ浏览器全屏显示
<meta name="x5-fullscreen" content="true"/>
UC强制竖屏或横屏显示
<meta name="screen-orientation" content="portrait|landscape">
UC全屏显示
<meta name="full-screen" content="yes">
禁止识别电话号码和QQ
<meta name="format-detection" content="telephone=no,email=no"/>
拨打电话与发送邮件
<a href="tel:15371469791">请拨打电话15371469791</a>
<a href="mailto:[email protected]">请发送邮件</a>
移动端问题解决:
<style type="text/css">
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>
<header>我是头部</header>
<section>
页面内容<br/>
页面内容<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定位
<header>我是头部</header>
<section>
页面内容<br/>
页面内容<br/>
。。。。。。
</section>
</div>
以上是关于移动端适配的主要内容，如果未能解决你的问题，请参考以下文章