移动端适配

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>

 




以上是关于移动端适配的主要内容,如果未能解决你的问题,请参考以下文章

移动端Web页面适配方案(整理版)

移动端H5页面适配问题研究

移动端适配-px转成rem

Vue项目配置rem移动端适配

移动端适配方案:js实现动态改变根元素的字体大小

H5+CSS3移动端适配技术