移动端常见问题汇总，拿来吧你！

1px适配方案

某些时候，设计人员希望 1px在手机显示的就是1px，这也是....闲的，但是我们也要满足他们的需求，

这时候我们可以利用缩放来达到目的

.border_1px:before{

    content: '';

    position: absolute;

    top: 0;

    height: 1px;

    width: 100%;

    background-color: #000;

    transform-origin: 0% 0%;

}

@media only screen and (-webkit-min-device-pixel-ratio:2){

    .border_1px:before{

        transform: scaleY(0.5);

    }

}

@media only screen and (-webkit-min-device-pixel-ratio:3){

    .border_1px:before{

        transform: scaleY(0.33);

    }

}

设置一个专门的class来处理1px的问题，利用伪类给其添加

• 
  
• -webkit-min-device-pixel-ratio 获取像素比
  
• transform: scaleY(0.5) 垂直方向缩放，后面的数字是倍数
  

图片模糊问题

.avatar{

    background-image: url(conardLi_1x.png);

}

@media only screen and (-webkit-min-device-pixel-ratio:2){

    .avatar{

        background-image: url(conardLi_2x.png);

    }

}

@media only screen and (-webkit-min-device-pixel-ratio:3){

    .avatar{

        background-image: url(conardLi_3x.png);

    }

}

根据不一样的像素比，准备不一样的图片，正常来说是1px图片像素 对应1px物理像素，图片的显示就不会模糊啦，但是这样的情况不多，不是非常重要，特殊需求的图，我们不这么做。

滚动穿透问题

移动端的网站，我们是经常会有一些弹出框出现的，这样的弹出框，在上面滑动，会导致我们后面的整个页面发生移动，这个问题怎么解决呢？？

body{

    position:fixed;

    width:100%;

}

给body添加position:fixed就可以使滚动条失效，这里弹框的显示和隐藏，我们利用JS进行控制，而且添加上position:fixed的一瞬间，可以看到页面一下回到0,0的位置，因为fixed是根据可视区定位的。

键盘唤起

main{

    padding: 2rem 0;

    /* height: 2000px; */

    position: absolute;

    top: 60px;

    bottom: 60px;

    overflow-y: scroll;

    width: 100%;

    -webkit-overflow-scrolling: touch;

}

当底部根据页面进行fixed定位的时候，键盘弹出一瞬间，fixed会失效，变成类似absoult，让main的内容无滚动，就不会连带fixed一起动了

并且为了保证如丝般顺滑：

• 
  
• -webkit-overflow-scrolling: touch;
  

移动端的神奇操作

IOS下的一些设置 和 安卓下的一些设置

添加到主屏幕后的标题

<meta name="apple-mobile-web-app-title" content="标题"> 

添加到主屏后的APP图标

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">

• 
  
• 一般我们只需要提供一个114*114的图标即可
  

启用webApp全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> 

<meta name="apple-touch-fullscreen" content="yes" /> 

• 
  
• 
  

  apple-mobile-web-app-capable

  
  

  删除默认的苹果工具栏和菜单栏，默认为no

  
  
  
• 
  

  apple-touch-fullscreen

  
  

  全屏显示

  
  
  

移动端手机号码识别

<meta name="format-detection" content="telephone=no" />

• 
  
• safari会对一些可能是手机号码的数字，进行识别，我们可以利用上面的方式，禁止识别
  

手动开启拨打电话功能

<a href="tel:13300000000">13300000000</a>

• 
  
• 在手机上点击这个链接，可以直接拨打电话
  

手动开启短信功能

<a href="sms:13300000000">13300000000</a>

• 
  
• 在手机上点击这个链接，可以跳转去短信页面，给该手机号发送消息
  

移动端邮箱识别

<meta name="format-detection" content="email=no" /> 

手动开启邮箱发送功能

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

• 
  
• 调用邮箱发送功能
  

优先启用最新版本IE和chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

移动端默认样式

• 
  
• 
  

  移动端默认字体

  
  
  0. 
     
  1. 数字 和 英文字体 可使用Helvetica字体，IOS 和 Android都有这个字体
     
  2. 手机系统都有自己默认的字体，直接使用默认的
     
  
  

  body{
  
      font-family:Helvetica；
  
  }
  

  
  
  
• 
  

  字体大小

  
  

  如果只是适配手机，可以使用px

  
  
  
• 
  

  IOS系统中，链接、按钮等点击会有灰色遮罩

  
  

  a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}
  

  
  
  
• 
  

  去除圆角

  
  

  button,input{
  
      -webkit-appearance:none;
  
      border-radius: 0;
  
  }
  

  
  
  
• 
  

  禁止文本缩放

  
  

  html{
  
       -webkit-text-size-adjust: 100%;
  
  }