移动端适配,可能会遇到的问题:

1)1px问题

2)UI图完美适配方案

3)iPhoneX适配方案

4)横屏适配

5)高清屏模糊问题

从移动端适配的基础概念出发,探究移动端适配各种问题的解决方案和实现原理。

* [ ] 英寸(inch,in)

描述屏幕的物理大小(屏幕对角的长度)

* [ ] 分辨率

1)像素

像素即一个小方块,具有特定的位置和颜色。

像素是图片或电子屏幕的最小组成单位。

2)屏幕分辨率

指一个屏幕具体由多少个像素点组成。

分辨率高不代表屏幕就清晰,屏幕的清晰程度还与尺寸有关。

3)图像分辨率

图片含有的像素数。

同一张图片,分辨率越高,图片越清晰。

4)PPI

每英寸包括的像素数

5)DPI:没英寸包括的点数

* [ ] 设备独立像素(DIP DP)(css像素)

Retina Display(视网膜屏幕)

1)设备像素比(dpr)

即**物理像素和设备独立像素的比值**。

web中,浏览器提供**window.devicePixelRatio**来获取dpr

css中,可以媒体查询**min-device-pixel-ratio**,区分dpr;

~~~

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }

~~~

* [ ] 移动端开发

在ios、Android开发中,样式单位其实使用的是**设备独立像素(css像素)**

为了视频所有的机型,写样式时需要把物理像素转换为设备独立像素。

例如:200px(物理像素),iphone6的设备像素比是2,则height为100pt。

* [ ] web端开发

css时,最多的单位是px,即css像素,当页面缩放比例是100%时,一个css等于一个设备独立像素。

页面的缩放系数 = css像素/设备独立像素

* [ ] 视口

viewport,代表当前可见的计算机图形区域。

1)布局视口

是网页布局的基准窗口,在pc浏览器上,布局视口等于当前浏览器的窗口大小。

在移动端,布局视口被赋予一个默认值,大部分为980px,保证pc的页面可以在手机浏览器上呈现,但非常小,用户可以手动放大

`document.documentElement.clientWidth / clientHeight`来获取布局视口大小。

2)视觉视口

通过屏幕真实看到的区域。

视觉视口默认等于当前浏览器的窗口大小

当用户对浏览器进行缩放时,**不会改变布局视口的大小,所以也没布局是不变的,但是缩放会改变视觉视口的大小**。

3)理想视口

网站也没在移动端展示的理想大小。

布局视口在移动端展示的效果不是一个理想的效果。

当页面缩放比例100%时,css像素= 设备独立像素,理想视口= 视觉视口。

4)Meta viewport

``告诉浏览器如何解析页面。

借助meta的viewport帮助我们设置视口,缩放等。

~~~

~~~

width:定义布局视口的宽度(device-width)

height:定义布局视口的高度

initial-scale:定义页面初始缩放比率

minimum-scale:缩放最小值

maximum-scale:缩放的最大值

user-scalable:一个布尔值,缩放页面

5)移动端适配

为了在移动端让页面获得更好的显示效果,必须让布局视口、视觉视口尽可能等于理想视口

device-width就是理想视口的宽度。

这时,1个css像素就等于1个设备独立像素,而且我们也是基于理想视口来进行布局的,所以呈现出来的页面在各种设备上都能大致相似

6)缩放

width可以决定布局视口的宽度,但不是布局视口的唯一决定性因素,缩放也会影响。

例如:400px ,缩放为2,

此时视觉窗口的宽度=理想视口宽度/innitial-scale 为200px

布局视口去两者最大值,即400px。

7)获取浏览器大小

* `window.innerHeight`:获取浏览器视觉视口高度(包括垂直滚动条)。

* `window.outerHeight`:获取浏览器窗口外部的高度。表示整个浏览器窗口的高度,包括侧边栏、窗口镶边和调正窗口大小的边框。

* `window.screen.Height`:获取获屏幕取理想视口高度,这个数值是固定的,`设备的分辨率/设备像素比`

* `window.screen.availHeight`:浏览器窗口可用的高度。

* `document.documentElement.clientHeight`:获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条、边框和外边距。

* `document.documentElement.offsetHeight`:包括内边距、滚动条、边框和外边距。

* `document.documentElement.scrollHeight`:在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。测量方式与`clientHeight`相同:它包含元素的内边距,但不包括边框,外边距或垂直滚动条。

* [ ] 1px问题

**在设备像素比大于1的屏幕上,写的1px实际上是被多个物理像素渲染,就会出现1px在有些屏幕上看起来很粗的现象。**

1)border-image

2)background-image

3)伪类+transform

基于媒体查询判断不同的设备像素比对线条进行缩放

~~~

.border_1px:before{

content: '';

position: absolute;

top: 0;

height: 1px;

width: 100%;

background-color: #000;

transform-origin: 50% 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);

}

}

如果需要满足圆角,加上border-radius即可

~~~

4)svg

5)设置viewport

通过设置缩放,让css像素等于真正的物理像素

~~~

const scale = 1 / window.devicePixelRatio;

const viewport = document.querySelector('meta[name="viewport"]');

if (!viewport) {

viewport = document.createElement('meta');

viewport.setAttribute('name', 'viewport');

window.document.head.appendChild(viewport);

}

viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

~~~

这是早先flexible采用的方案,

代价:页面上所有的布局都要按照物理像素来下,不现实。

* [ ] 移动端适配方案

1)flexible方案

早期移动端适配方案,引用flexible后,页面统一rem布局

rem是相对于html节点的font-size来做计算的。

被弃用

2)vh,vw方案

vh,vw方案将视觉视口宽度window.innerWidth和视觉视口gaudywindow.innerHeight分为100份。

vw,vh,vmin,vmax

我们可以**使用PostCss的postcss-px-to-viewport插件**帮助完成这个过程。

calc

* [ ] 适配iPhoneX

取消了物理按键,改成底部的小黑条

1)安全区域

三个改动:圆角,刘海,小黑调。

安全区域就是一个不受上面三个效果的可是窗口范围。

为了保证页面的显示效果,我们必须把页面限制在安全范围内,但不影响整体效果。

2)viewport-fit

专门为了适配iPhoneX而诞生的一个属性,限制网页如何在安全区域进行展示。

contain:可视窗口完全包含网页内容

cover:网页内容完全覆盖可是窗口。

默认情况下或者设置为auto和contain效果相同。

3)env,constant

我们需要将顶部和底部合理的摆放在安全区域内,IOS11新增了两个css函数,env、constant,用于设定安全区域与边界的距离

* `safe-area-inset-left`:安全区域距离左边边界距离

* `safe-area-inset-right`:安全区域距离右边边界距离

* `safe-area-inset-top`:安全区域距离顶部边界距离

* `safe-area-inset-bottom`:安全区域距离底部边界距离

注意,我们必须指定viewport-fit后才能使用这两个函数

~~~

~~~

`constant`在`iOS < 11.2`的版本中生效,`env`在`iOS >= 11.2`的版本中生效,这意味着我们往往要同时设置他们,将页面限制在安全区域内:

~~~

body {

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

~~~

当使用底部固定导航栏是,我们需要设置padding值

~~~

{

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

~~~

* [ ] 横屏适配

很多视口我们要对横屏和竖屏显示不同布局,所以我们需要检测不同场景下给定不同的样式

1)JavaScript检测横屏

`window.orientation`:获取屏幕旋转方向

~~~

window.addEventListener("resize", ()=>{

if (window.orientation === 180 || window.orientation === 0) {

// 正常方向或屏幕旋转180度

console.log('竖屏');

};

if (window.orientation === 90 || window.orientation === -90 ){

// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度

console.log('横屏');

}

});

~~~

2)css检测横屏

~~~

@media screen and (orientation: portrait) {

/*竖屏...*/

}

@media screen and (orientation: landscape) {

/*横屏...*/

}

~~~

* [ ] 图片模糊问题

*1)产生原因

图片上每个像素对应在屏幕上使用一个屋里像素来渲染,才能达到最佳的显示效果。

在dpr>1的屏幕上,位图的一个像素可能有多个物理像素来渲染,然而这些物理像素点不能准确的分配上对应位图像素的颜色,只能去近似值。

2)解决方案

针对不同的dpr的屏幕,展示不同分辨率的图片

在`dpr=2`的屏幕上展示两倍图`(@2x)`,在`dpr=3`的屏幕上展示三倍图`(@3x)`。

3)媒体查询

使用media查询判断不同的设备像素比来显示不同精度的图片

终端html页面,HTML5的终端适配相关推荐

  1. python打开伪终端_关于 macOS 伪终端(PTY)的学习

    转载请注明来源 https://justinyan.me 1973 年 Xerox PARC 第一次在 Xerox Alto 这款个人计算机上推出带有 GUI 界面的操作系统,自此让极大地降低个人计算 ...

  2. SoDate-7201新一代光伏发电数据采集器终端(光伏逆变器数据采集监测终端)HPLC双模通信+台区融合终端+4G云平台方案

    光伏数据采集器终端 SoDate-7201新一代光伏数据采集器终端(分布式光伏逆变器数据采集监测终端)光伏发电数据采集器具备HPLC双模通信+台区融合终端+4G云平台方案 一.分布式光伏发电现场概述 ...

  3. 安装终端服务和终端服务授权,激活终端服务授权

    1.1 安装和配置终端服务 1.1.1 安装终端服务授权 在DCServer安装终端服务器授权,给域中的终端服务器分发终端服务器许可.没有做指定终端服务授权的终端服务器,只能让用户使用120天. 步骤 ...

  4. 终端、虚拟控制台与伪终端

    (1)在本机上登录字符界面或者X11图形界面均为tty终端 (2)通过telnet/ssh远程登录或者在X11中生成一个XTERM的终端,均为虚拟终端PTS. 如: [lujinhong@localh ...

  5. linux怎么将终端一分为二,Linux下的终端和作业控制

    一.进程间的关系 进程间的三种关系:进程组.作业和会话. 1.进程组 每个进程除了有一个进程ID之外,还属于一个进程组.进程组是一个或多个进程的集合.通常,它们与同一作业相关联,可以接收来自同一终端的 ...

  6. 2022 极术通讯-安谋科技参与起草的PSA相关物联网终端安全标准介绍(电信终端产业协会发布)

    首发极术社区.如对Arm相关技术感兴趣,欢迎私信 aijishu20加入技术微信群.导读:极术通讯引入行业媒体和技术社区.咨询机构优质内容,定期分享产业技术趋势与市场应用热点. 芯方向 • 安谋科技参 ...

  7. 终端、控制台、虚拟终端、伪终端的概念,阐述终端与shell的关系

    1.终端就是处理计算机主机输入输出的一套设备,它用来显示主机运算的输出,并且接受主机要求的输入,典型的终端包括显示器键盘套件,打印机打字机套件等. 终端又分为:本地终端.用串口连接的远程终端.用TCP ...

  8. DSM-830源网荷系统控制终端(源网荷智能互动终端)-新型电力负荷控制终端(电力负荷管理终端装置)-互动式需求侧管理终端-专变采集终端的功能。DSM-830交互式需求侧管理终端(需求侧管理互动式终端

    DSM-830源网荷系统控制终端(源网荷智能互动终端)-新型电力负荷控制终端(电力负荷管理终端装置)-互动式需求侧管理终端-专变采集终端的功能.DSM-830交互式需求侧管理终端(需求侧管理互动式终端 ...

  9. 华为发布首款鸿蒙系统终端,首款鸿蒙系统终端新闻 华为正式发布鸿蒙系统

    华为鸿蒙系统一直引人关注,对华为鸿蒙系统的发布,一样一直消息不断.而2019年8月10日,华为正式发布鸿蒙系统,全球首款采取华为鸿蒙系统的光荣智慧屏产品,正式跟大家亮相.下面就来具体的看下首款鸿蒙系统 ...

最新文章

  1. php支付密码控件,vue支付密码的图文实例
  2. JVM 的 工作原理,层次结构 以及 GC工作原理
  3. Accuracy和Precision
  4. 三七互娱上半年近九成营收来自手游 精品化优势凸显
  5. POJ 3481 treap
  6. 使用GDAL的MEM内存文件保存临时文件
  7. 「美团 CodeM 复赛」城市网络
  8. Halcon深度学习超参数
  9. 在虚拟机中安装Neokylin操作系统
  10. 平面设计师需要掌握哪些印刷知识
  11. java ckfinder 图片重命名,CKFinder上传TIFF格式图片
  12. 嵌入式分享合集126
  13. IDC发布2021年中国人工智能市场10大预测
  14. ubantu + anaconda + TensorFlow 1.13.1
  15. 2019高中数学联赛备考手册(预赛试题集锦)
  16. Django ORM 查询重复记录并显示
  17. 四种期权损益结构图,助您轻松理解期权损益
  18. mysql通过卡号识别银行_Java 根据银行卡号获取银行名称以及图标
  19. UE4接入Android第三方库1——框架配置
  20. 第一次接触动态规划的心得和感悟

热门文章

  1. main方法的格式讲解
  2. Android 项目结构说明
  3. Spring Boot 2.x基础教程:使用@Scheduled实现定时任务
  4. 用c语言编写通讯录程序,学C三个月了,学了文件,用C语言写了个通讯录程序
  5. 拼装sql_3分钟短文 | Laravel复杂SQL超多WHERE子句,本地作用域你没用过
  6. linux windows并发模型,Linux并发服务器模型四 -- poll
  7. 右边菜单_Excel – 如何始终显示下拉菜单右边的小箭头?
  8. java矩阵传递给r_从JAVA调用R得到卡方统计和p值
  9. matlab丢失icuuc54,icuuc56.dll下载|
  10. mysql和html的联系_前台与PHP与Mysql三者的联系