像素与viewport概念
来源:互联网 发布:基德2011总决赛数据 编辑:程序博客网 时间:2024/05/29 07:19
一、像素的概念
- px :逻辑像素 ,浏览器使用的抽象单位
- dp、pt:物理像素
- dpr:设备像素缩放比
- ppi:屏幕每英寸的像素数量,即单位英寸内的像素密度
ppi 越高,像素数越高,图像越清晰。
Retina屏即高清屏,dpr 大于等于 2。
二、viewport
web初期,网页渲染在手机上,会只显示页面的其中一部分。用户需要通过滑动屏幕才能查看网页的全貌。由于用户体验太差,于是浏览器商就引入了 viewport 的概念。
2.1 手机浏览器的默认行为
- 页面默认先渲染在一个980px(ios)或其他的 viewport 里面
- 通过缩放,让用户能看到网页的全貌
为什么渲染时,要加入 viewport ?
直接渲染在小屏幕会导致排版布局等的混乱
2.2 viewport 的概念
两个 viewport :视口(visual) viewport 和布局(layout) viewport
- 视口 viewport 就是用户查看网页的视口(可以理解为屏幕),可以通过缩放来改变其大小
- 布局 viewport 就是网页渲染的一个底层页面,ios 默认 viewport 为980 px 指的就是布局 viewport
通过调用
document.body.clientWidth
查看默认布局Viewportwindow.innerWidth
查看度量Viewport
2.3 不使用默认布局 viewport 的原因
- 不同设备的默认值不同,宽度不可控制
- 缩放后连接可能因为太小不能准确触控,又有滚动,交互差
- font-size:40px=PC的12px,不规范
2.4 设置 viewport
在 html 中使用元标签meta
设置 viewport:
<meta name='viewport' content='width=device-width,initial-scale=1,user-scalabel=no'>
相关参数
- width:设置布局viewport的值
- initial-scale:设置页面的初始缩放
- minimum-scale:最少缩放
- maximum-scale:最大缩放
- user-scalable:用户能否缩放
最佳设置
使视口 viewport = 设备宽度 = 布局 viewport
- width = device-width,让布局 viewport 等于设备宽度,也就是说,设置 320px 的元素会铺满 iphone5 的屏幕宽度。
- initial-scale = 1,设置初始缩放比为1,使得缩放比因为网页的大小而改变,让视口 viewport = 布局 viewport
- user-scalable = no,使得视口 viewport = 布局 viewport 保持不变
参考
慕课网教程:Hello,移动WEB
阅读全文
0 0
- 像素与viewport概念
- 响应式布局----像素密度与viewport
- 深入理解移动端像素知识与Viewport知识
- 深入理解移动端像素知识与Viewport知识
- 深入理解移动端像素知识与Viewport知识
- Equalizer中的视口(viewport)与像素视口(pixel viewport)
- 关于像素与分辨率的一些概念
- 此像素非彼像素(viewport与苹果的变化)css媒体查询-width与device-width的区别
- 像素概念
- 关于像素,分辨率,viewport,设备像素,css像素,Retina
- 移动网页 viewport(视口) 像素密度
- 移动端 viewport 概念介绍
- Android dip 与 px 的区别,像素密度的概念。
- Xcode5中AppIcon中pt与像素的概念
- 设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解
- 像素、分辨率、图片大小概念
- 像素、dpi、dip概念
- 亚像素相关概念
- 给不了解前端的同学讲前端
- CSS实现元素的居中显示
- 说说CSS学习中的瓶颈
- sass的使用
- 并发insert情况下会发生重复的数据插入问题
- 像素与viewport概念
- 浅谈响应式
- 监听浏览器复制粘贴事件
- 软件测试方法——单元测试、集成测试、系统测试、确认测试
- mysql存储过程的3种参数模型详细说明
- 最优化方法预备知识
- TensorFlow学习日记15
- 控制反转(IOC)和依赖注入(DI)的区别
- 浏览器加载、解析、渲染的过程