移动端适配方案(上)
转载自:https://github.com/riskers/blog/issues/17
要搞懂移动端的适配问题,就要先搞明白像素和视口。
像素
在移动端给一个元素设置 width:200px
时发生了什么?这里的px
到底是多长呢?像素是网页布局的基础,但是我们一直在用直觉使用它。
其实存在两种像素:
1. 设备像素
屏幕的物理像素,任何设备屏幕的物理像素的数量都是固定不变的,单位是pt
。
2. CSS像素
在CSS、JS中使用的一个抽象的概念,单位是 px
。
顺便说下,CSS像素也可以称为设备独立像素(device-independent pixels),简称为
dips
,单位是dp
。
那么,我们现在再来说说一个元素 width:200px
以后会怎么样。这个元素跨越了200个CSS元素,200个CSS元素相当于多少个设备像素取决于两个条件:
- 页面是否缩放
- 屏幕是否为高密度
这两方面后面再解释,先梳理一下手机硬件之间的关系,注意这里使用的都是物理像素。
以 iPhone5 为例,我们已知的是:
- 分辨率:
1136pt x 640pt
指屏幕上垂直有 1136 个物理像素,水平有 640 个物理像素 - 屏幕尺寸:
4英寸
注意英寸是长度单位,不是面积单位。4英寸指的是屏幕对角线的长度。 - 屏幕像素密度:
326dpi
屏幕像素密度(Pibel Per Inch)简称ppi
,单位是dpi
(dot per inch)。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说,ppi越高越好,因为图像会更加细腻清晰。
ppi
是可以通过 分辨率 和 屏幕尺寸 计算得到的:
这个网站列出了很多设备的分辨率和屏幕尺寸,并且计算了ppi。
视口
桌面浏览器中,浏览器窗口就是约束你的CSS布局视口(又称初始包含块)。它是所有CSS百分比宽度推算的根源,它的作用是给CSS布局限制了一个最大宽度,视口的宽度和浏览器窗口宽度一致。
但是在移动端,情况就很复杂了。
布局视口
一个没有为移动端做优化的网页,会尽可能缩小网页让用户看到所有东西。这是我的手机查看博客园的样子,你也可以在Chrome中以移动开发模式看到。
浏览器厂商为了让用户在小屏幕下网页也能够显示地很好,所以把视口宽度设置地很大,一般在 768px ~ 1024px 之间,最常见的宽度是 980px。
所以,在手机上,视口与移动端浏览器屏幕宽度不再相关联,是完全独立的,这个浏览器厂商定的视口被称为布局视口。
布局视口我们是看不见的,只知道网页的最大宽度是 980px
,并且被缩放在了屏幕内。
可以这样设置布局视口的宽度:
<meta name="viewport" content="width=640">
媒体查询与布局视口
700px 指的是布局视口的宽度
@media (min-width: 700px){... }
document.documentElement.clientWidth/Height
返回布局视口的尺寸
视觉视口
视觉视口是用户正在看到的网页的区域,大小是屏幕中CSS像素的数量。
window.innerWidth/Height
返回视觉视口的尺寸
理想视口
布局视口明显对用户是不友好的,完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念,它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度,用户进入页面的时候不需要缩放。
现在讨论所谓的『最理想的宽度』到底是多少?其实,如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口:
<meta name="viewport" content="width=device-width">
定义理想视口是浏览器的事情,并不能简单地认为是开发者定义的,开发者只能使用。
screen.width/height
返回理想视口的尺寸,有严重的兼容性问题---可能返回两种值:
- 理想视口的尺寸(下载浏览器)
- 屏幕的设备像素尺寸(内置浏览器)
Screen size tests和Understanding viewport可以测试你的设备的screen.width
值,同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器(如UC、Chrome)之间。
默认浏览器是安卓系统内置的浏览器,长下面那个样子。而且它使用的是Webkit而不是Blink。只有在更新安卓系统的时候才能更新它。直到安卓4.3,Google不再更新。
而下载浏览器都返回的是理想视口尺寸。
缩放
缩放与设备像素、CSS像素的关系
缩放是在放大或缩小CSS像素,比如一个宽度为 200px 的元素无论放大,还是200个CSS像素。但是因为这些像素被放大了,所以CSS像素也就跨越了更多的设备像素。缩小则相反。
缩放与视口
缩放会影响视觉视口的尺寸
页面被用户放大,视觉视口内CSS像素数量减少;被用户缩小,视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。
用户缩放不会影响布局视口
注意,这是『用户缩放』,后面会说开发者设置缩放的情况
缩放比例
我们在开发者工具中可以在这里查看缩放比例:
这里的 0.3 是相对于理想视口的。
在下载浏览器中,可以这么算(理想视口与视觉视口的比):
zoom level = screen.width / window.innerWidth
禁止缩放
<meta name="viewport" content="user-scalable=no">
设置缩放
<meta name="viewport" content="initial-scale=2">
使用initial-scale
有一个副作用:同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale=1
与width=device-width
的效果是一样的。
完美视口
解决各种浏览器兼容问题的理想视口设置
<meta name="viewport" content="width=device-width,initial-scale=1">
设备像素比
在谈到像素的时候,讲到除了缩放,屏幕是否为高密度也会影响设备像素和CSS像素的关系。
在缩放程度为100%(这个条件很重要,因为缩放也会影响他们)时,他们的比例叫做设备像素比(device pixel ratio):
dpr = 设备像素 / CSS像素
可以通过JS得到: window.devicePixelRatio
设备像素比也和视口有关:
dpr = 屏幕横向设备像素 / 理想视口的宽
总结
这一篇介绍了移动端适配需要掌握的知识,先说明了移动端存在的两种像素,然后介绍了三种视口,由缩放对视口的影响引入理想视口,最后说明设备想告诉比。下一篇介绍现在市面上的适配方案。
转载于:https://www.cnblogs.com/jolee/p/6125872.html
移动端适配方案(上)相关推荐
- 小小Mac:Web移动端适配方案
一.前言 在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
- flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
- H5移动端适配方案rem/vw
前言 在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
- h5响应式布局、PC和移动端适配方案
前言 春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
- 移动端适配方案px2rem
移动端的适配方案 React 暴露webpack配置,即 react-scripts 包 npm run eject ⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错! 安装 ...
- CSS移动端适配方案
文章目录 移动端适配 移动端适配介绍 视口的介绍 布局视口和视觉视口 理想视口 移动端适配方案 rem适配方案 基本介绍 单位换算 vw适配方案 移动端适配 移动端适配介绍 移动互联网的快速发展,让人 ...
- 移动端适配方案有哪几种?
虽然我们课程明确的区分各种移动端适配方案,但依然有很多同学搞不清楚移动端等比适配和响应式,这里对移动端主流适配方案给大家做一个分析. 移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局.主 ...
- 移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位 当前市面上用的比较多 相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
- 一些常见的移动端适配方案,你了解吗?
前言 移动端设备的尺寸很多,而 UI 设计稿一般只会基于一个尺寸(一般是 375px 或 750px )进行设计. 目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案. 媒体查询 @medi ...
最新文章
- 一: 建立Vue sampleproject
- C语言setjmp函数使用
- ACM入门之【ST表/RMQ】
- oracle rac 中的ocr,11g rac中 ocr和 votingdisk疑问
- MySQL优化(2)--------常用优化
- datatable的数据进行组内排序_排序算法学习分享(四)希尔排序
- python排序算法实现_排序算法整理(Python实现)
- BCG菜单button的简单使用
- Json Datable Convert
- 1.4. 为现有的应用程序添加 Core Data 支持(Core Data 应用程序实践指南)
- Global.asax取绝对路径
- Himall商城Api签名帮助类
- 【word】公式排版问题
- cdr2022更新24.1版CorelDRAW2022稳定版
- 计算机组成原理符号标志,计算机组成原理之数据的表示及运算
- Matlab绘制简单动画
- 为什么要使用工作流引擎
- MVC项目实践,在三层架构下实现SportsStore-01,EF Code First建模、DAL层等
- matlab多重心法,多重心法例.ppt
- 使用python实现科学记数法的书面形式输出
热门文章
- zemax评价函数编辑器_ZEMAX软件使用入门
- android 5. 蓝牙 mesh,蓝牙mesh组网
- 鸿蒙系统的适配国产手机,真正的好消息!其它国产机,也在适配华为鸿蒙系统...
- 对比四大企业级linux版本_Linux家族族谱
- pb9 调用系统语音_成都电销系统一个月多少钱_选择灵狐传媒_收费透明
- 二维分类教案_幼儿园中班数学教案中班数学教案二维排序——师乐汇幼儿教师教育网...
- 【JAVA基础篇】注解
- 4个空格和一个tab有什么区别_火花塞为什么一换就是4个?只换一个不行吗?
- 目标检测第5步:如何在Windows 10系统下,搭建YOLOv5(5.0)环境?保姆级,没有人比这个更详细了(更新时间2022.3.22)
- Ubuntu 16.04 安装CodeBlocks