mobile_视口
document.documentElement.clientWidth 不包含滚动条
window.innerWidth +滚动条
window.outerWidth +浏览器边框
window.width 屏幕区域
IPhone 6 的 屏幕分辨率 为 750*1334
IPhone 6 的尺寸 为 4.7 英寸
IPhone 6 的 像素比 DPR 为 2 window.devicePixelRatio;
IPhone 6 的 独立像素 为 375*667 window.innerWidth;
IPhone 6 的布局(视口)像素为 980*1743 document.documentElement.clientWidth
在普通的 PC 端,视口的默认宽度 与 浏览器的窗口宽度 一致
如果直接将 PC 端页面 放到移动端,会是一个 压缩的效果
- 移动端的浏览器厂商,都面临一个问题
如何将 数以万计 或者 数以亿计 的 PC 端网页 完整的呈现在移动端设备,而不会出现滚动条?
此时,移动端浏览器必须有一个容器,容器 规定 PC 端页面 如何在移动端浏览器呈现
- 在 PC 端
- 浏览器的视口 是小于屏幕的
- 在移动端
- 浏览器的视口 是远大于屏幕的独立像素的
移动端浏览器厂商要实现的目标:
在小屏幕的移动设备上,尽可能的缩小网站来让用户看到网站的全貌。
于是,移动端浏览器厂商,将 布局视口 默认设置地比 手机屏幕 大,如 IPhone6 的布局视口为 980px
- 程序员两种方案:
- 两套页面
- 响应式布局
移动端的三个视口
- layout viewport
布局视口,即容器。用来装 PC 端页面的
- IPhone 6 的布局视口像素 980
- 除了 黑莓 和 IE 是 1024,其他大多都是 980
默认的布局视口宽度 远大于 屏幕的宽度
- 布局像素
- 可以通过 document.documentElement.clientWidth 获取
- 布局像素,是 css 像素
- 在 PC 端,单独一个 width 为 20% 的元素 最终拿到的值由 初始包含块width(屏幕大小) 决定
PC 端中从 初始包含块 开始盒子,而在移动端,是从 布局视口 开始填盒子的
因此,一定程度上,可以把移动端的 布局视口 理解为 初始包含块
- visual viewport
视觉视口 与 设备屏幕的区域 一样大
视觉视口的像素,是 css 像素,并且会随着用户的缩放而改变
视觉视口像素
可以通过 window.innerWidth 获取,但是在 Android 2 ,Oprea mini,UC 8 中无法正常获取
- viewport
据分析,布局视口 的默认宽度并非一个理想的宽度
- 理想视口,即用户进入到页面时,不需要进行缩放
这也是为什么苹果和效仿苹果的浏览器厂商 会引进理想视口
只有专门为移动设备开发的网站,才有 理想视口 一说。
- 不加 meta 理想视口标签
物理像素 750
独立像素 375
css 像素 980
像素比 DPR = 物理像素 / 独立像素 = 750 / 350 = 2
- 优点:
- 等比现象,同一元素,在不同设备(屏幕)上,呈现的效果是一样的。(???/980)
- 缺点:
- 页面元素小,文本小,用户体验差
- 只有在页面中 加入 <meta name="viewport" content="width=device-width" /> 理想才会生效
- 加上 meta 理想视口标签: 布局视口 = 视觉视口 = 理想视口
物理像素 750
独立像素 = css 像素 = 375
像素比 DPR = 物理像素 / 独立像素 = 物理像素 / css 像素 = 750 / 375 = 2
- 优点:
- 文本清晰呈现,用户体验较好
- 像素体系连接起来了(DPR 为 2 时,1 个 css 像素 = 多少物理像素???)
- 不缩放 像素比 DPR = 物理像素 / 独立像素 = 物理像素 / css 像素 = 750 / 375 = 2
- 不缩放 1 个 css 像素 = 4 个物理像素
- 缺点:
- 同一个元素,在不同设备(屏幕)上,呈现出的效果不一致(不等比现象,???/375 ???/414)
- ----解决:适配。
- 同一个元素,在不同设备(屏幕)上,呈现出的效果不一致(不等比现象,???/375 ???/414)
- <meta name="viewport" content="布局视口的宽=独立像素的宽" />
<meta name="viewport" content="width=375" />
像这样直接指定 具体数值,ios 会呈现出不理想效果
在 PC 浏览器,最干净的视口就是约束 css 布局的视口,决定了用户能看到什么
移动设备上,视口分为两个:布局视口限定 css 布局,视觉视口决定用户看到什么
移动设备上,一旦加入 meta 标签,就有了理想视口,对于特定设备上特定浏览器的布局视口的一个理想尺寸
mobile_视口的更多相关文章
- CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口
CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...
- 移动端web开发——视口
本篇主要是记录一下移动端视口的分类说明和其它的一些知识.在开始之前,先看一个典型的例子: <meta name="viewport" content="width= ...
- jmobile学习之路 ---- 视口
当我们的浏览器在窗口最大化的时候,此时屏幕的宽度,就是我们桌面的分辨率.这个规则仅仅适用于PC! 我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980!居然和PC屏幕差不多大! 苹果主导的这 ...
- NGUI 指定视口大小
由于只是给Uinty开发插件,对Unity没有系统的学习,对Unity的很多功能都不是非常了解,幸得其他Unity同事的耐心教导,才不至于想崩头.记录一下,避免重复犯错. NGUI可以建立指定视口大小 ...
- 移动web开发之视口viewport
× 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...
- HTML5移动Web开发(九)——优化浏览器视口宽度设置
每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...
- 说说移动前端中 viewport (视口)
转载网络资源的文章:来源不详~~ 移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设 ...
- 移动前端中viewport(视口) 转
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...
- 响应式注意要添加“视口”约束标记---viewport
视口:我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980,却和PC屏幕差不多大.原因是苹果主导的这些手机厂商,为了使用户获得完整web体验,很多设备都会欺骗浏览器返回一个数值较大的“视口” ...
随机推荐
- C# 另一种提交表单
一般提交表单的方式就是:Get,Post 以及关联action 今天看了一种方式感觉不错: 可以在submit里面写 PostBackUrl="XXXX",即回发的URL,可以实现 ...
- 理解 Web 中的Session
===================================Session 工作原理是什么?===================================因为 http 协议是无状态 ...
- [再寄小读者之数学篇](2014-06-21 Beal-Kaot-Majda type logarithmic Sobolev inequality)
For $f\in H^s(\bbR^3)$ with $s>\cfrac{3}{2}$, we have $$\bex \sen{f}_{L^\infty}\leq C\sex{1+\sen{ ...
- [物理学与PDEs]第5章第4节 本构方程 - 应力与变形之间的关系
5. 4 本构方程 - 应力与变形之间的关系 5.4.1. 本构关系的一般形式 1. 若 Cauchy 应力张量 ${\bf T}$ 满足 $$\bex {\bf T}({\bf y})=\hat{\ ...
- [物理学与PDEs]第4章第2节 反应流体力学方程组 2.3 混合气体状态方程
1. 记号与假设 (1) 已燃气体的化学能为 $0$. (2) 单位质量的未燃气体的化学能为 $g_0>0$. 2. 对多方气体 (理想气体当 $T$ 不高时可近似认为), $$\bex ...
- [物理学与PDEs]第1章第7节 媒质中的 Maxwell 方程组 7.3 媒质中电磁场量的表示
1. 电磁能量密度 $$\bex \cfrac{1}{2}({\bf E}\cdot{\bf D}+{\bf B}\cdot{\bf H}). \eex$$ 2. 电磁能量流密度向量 $$\bex { ...
- luogu P5286 [HNOI2019]鱼
传送门 这题真的牛皮,还好考场没去刚( 这题口胡起来真的简单 首先枚举D点,然后对其他所有点按极角排序,同时记录到D的距离.然后按照极角序枚举A,那么鱼尾的两个点的极角范围就是A关于D对称的那个向量, ...
- Trie树的二三事QWQ
写在前面 Trie,又称字典树,是一种用于实现字符串快速检索的多叉树结构.Trie的每个结点都拥有若干字符指针,若在插入或检索字符串时扫描到一个字符c,就沿着当前节点的c这个字符指针,走向该指针指向的 ...
- 更改 Ubuntu默认Python版本的问题
一般Ubuntu默认版本为2.x,之前运行一些程序,将默认版本修改为3.5,现在想修改为2.7. 之前的方法有些忘记,现在重新记录一下: 1.查看你系统中有哪些Python的二进制文件可供使用, ls ...
- 第六章 接口,lamda表达式与内部类
接口 接口可以包含常量, 且不需要publish static final修饰, 接口的域会自动添加该修饰符. Java建议不要写多余的代码,因此省略修饰符更简洁. 全部都是常量的接口背离了接口的初衷 ...