移动端常用的适配方案

一设备独立像素

每个设备都有属于自己的独立像素，通过浏览器的模拟器可以看到，每个设备的独立像素。

每个设备设备独立像素，跟之前所有的物理像素之间关系如下：

设备像素比

所谓像素比，即是：物理像素和设备独立像素的比值

这个比值可以利用 JS 进行获取：window.devicePixeRatio。

二视口概念

2.1 布局视口

布局视口是网页布局的基准窗口，在这里只考虑布局，也就是不会有非布局的内容，比如：滚动条，菜单栏。

在移动端，布局视口有一个默认值 980px，这保证了 PC 网站可以在手机上显示。

在 JS 中可以通过 document.documentElement.clientWidth 来获取布局视口大小。

2.2 视觉视口

视觉视口是用户视觉上看到的真实区域，包括滚动条。

在 JS 中可以通过window.innerWidth

2.3 理想视口

理想视口是我们常说的设备独立像素，不过当布局视口和适口一致时，结果就是一样的。

在 JS 中可以利用 window.screen.width 可以获取到。

三适配

3.1 视口设置

想要更改布局视口，利用 meta 的标签的 viewport 来进行设置，除此之外，还可以进行页面的缩放等操作。

3.2 viewport 相关配置

属性	值	描述
width	正整数或 device-width	以像素为单位，定义布局视口的宽度
height	正整数或 device-height	以像素为单位，定义布局视口的高度
initial-scale	允许是小数	定义页面初始缩放比例
minimum-scale	0.0 - 10.0	定义缩放的最小值
maximum-scale	允许是小数	定义缩放的最大值（ios10 & ios10+无效）
user-scalable	yes / no	设置是否允许缩放，同上无效

initial-scale = 设备独立像素 / 视觉视口宽度
视觉视口宽度 = 设备独立像素 / initial-scale

3.3 注意事项

iso10 及ios10+ 设置最大缩放值无效
inital 和 width 是有冲突的
initial 和最小值是一致的
部分安卓机型不接受 width = 具体数值这样的操作

注意: 正常情况下，我们会把初始，最小，最大都设置为 1，不允许用户缩放页面。但是因为 maxium 无效，所以会通过 JS 来禁止缩放。

视口设置:

html
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

3.4 rem适配

<style>
// 设置当前这个html根元素的字体为20px
 html {
     
     
     font-size: 20px;
 }
 div {
     
     
     font-size: 15px;
     width: 5rem;
     height: 5rem;
     background: red;
 }
</style>

width = 20* 5 = 100px

然后利用 JS 动态设定 font-size：

<script>
 // 获取当前页面的html根元素
 var html = document.documentElement
 // 获取当前页面的html根元素的宽
 var widths = html.clientWidth
 // 分为10等份
 var num = 10;
 html.style.fontSize = widths / num + 'px'
 比如: 
     当前设计稿给的宽是640  就是 640 / 10 = 64rem 所有量设计稿的div的宽高，就可以直接 设计稿宽 / 64rem
     
 css
 @rem: 64rem;
.header {
     
     
  height:  88 / @rem; 
  /* 88头部的高度是设计稿给的 * 64整体的宽度 */
  position: fixed;
  background: red;
}
</script>

总结:

移动端适配单位:rem ，适配时候需要利用js动态设定 font-size。
viewport 一定要设置。
清楚物理像素设备独立像素，像素比三个概念。

四真机调试

下载地址: https://sourceforge.net/projects/xampp/files

安装：打开找到 Apache 点击 start 开启服务

如果启动失败端口被占用的情况下：修改端口文件 httpd-ssl-conf文件

注: 个人觉得这种真机调试太麻烦了，可以直接用 live-servers 去 https://www.npmjs.com/ 找到相对应的npm live-server 安装包进行全局安装。

1、输入: live-server 启动

2、把前面 live-server 服务自动给匹配的地址改成你本机的 ip 地址即可

五横竖屏适配

@media screen and (orientation:portrait){
    
    
    #box{
    
    
        background: red;
    }
}
@media screen and (orientation:landscape){
    
    
    #box{
    
    
        background: green;
    }
}

screen 屏幕
orientaion 方向
portrait 竖向
landscape 横向

六适配 iphone x

利用 iphoneX 专属样式 viewport-fit 属性，会对网页设置安全区：

<meta name="viewport" content="viewport-fit=cover>

加给自己想要的间距，比如说:

body{
    
    
  padding-bottom:constant(safe-area-inset-bottom);
  padding-bottom:env(safe-area-inset-bottom);
}

constant 小于 ios11.2 版本生效
env 大于 ios11. 2版本生效
padding-bottom: constant(safe-area-inset-bottom) //里面值不需要自己去填写，
padidng-bottom: env(safe-area-inset-bottom)
.safe-area-inset-left 设置左侧安全区
.safe-area-inset-right 设置右侧安全区
.safe-area-inset-top 设置顶部安全区
.safe-area-inset-bottom 设置底部安全区

七 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);
    }
}

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

注: 我是不建议这种，可以直接用 img 图片而简单快捷了很多

八一些骚操作

生成 app 图标：<meta name="apple-mobile-web-title" content="我的app">
启用 webApp 全屏模式：

<meta name="apple-mobile-web-app-capable" content="yes"> 删除默认的苹果工具栏和菜单栏默认为 no
<meta name="apple-touch-fullscreen" content="yes"> 全屏展示（app的时候会用到）

本文档引自与掘友–梁sir 同时也是自己的学习经历
梁sirGit地址：[https://github.com/LiangJunrong/document-library]