viewport_viewport适配 - CSDN
viewport 订阅
Viewport
信息
操作系统
跨平台
开发语言
JavaScript
开源协议
MIT
Viewport
Viewport 是一个 JavaScript 组件让你实现轻松的网页 viewport 管理,你可以获取 viewport 的大小维度,可帮你在 JS 中做一些检查。
收起全文
精华内容
参与话题
  • Viewport详解

    千次阅读 2018-10-16 21:30:13
    因此首先我们需要了解的就是一个与屏幕大小息息相关的属性–ViewportViewport Viewport翻译成中文可以叫“视窗”或者是“视口”,它表示的是用户网页的可视范围(指页面能够被浏览的范围)。一个针对移动端优化过...

    移动端与桌面端最明显的区别就在于屏幕的大小。在比桌面端屏幕小不少的手机移动端上做web开发,网页的布局将会是一个全新的课题。因此首先我们需要了解的就是一个与屏幕大小息息相关的属性–Viewport。

    Viewport

    Viewport翻译成中文可以叫“视窗”或者是“视口”,它表示的是用户网页的可视范围(指页面能够被浏览的范围)。一个针对移动端优化过的网页的meta标签如下:

    <meta name='viewport' content='width: device-width, init-scale=1.0'>
    

    我们来分析一下viewport的属性值:

    • width:控制viewport的宽度,这个值可以被指定,例如:500px。亦或者是“device-width”,意思是设置视口宽度为设备宽度。
    • height:控制viewport的高度。
    • initial-scale:初始缩放比例,即每一次加载时页面缩放的比例。
    • maximum-scale:允许用户缩放到的最大缩放比例。
    • minimum-scale:允许用户缩放到的最小缩放比例。
    • user-scaleable:是否允许用户缩放,可以传“yes”或“no”

    举一个例子来说明以上的属性,我们来创建这样一个网页:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Test</title>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		h3{
    			display: inline-block;
    		}
    	</style>
    </head>
    <body>
    	<h3>浏览器宽度:</h3><span id="deviceWidth"></span>
    	<br/>
    	<h3>设备的DPR:</h3><span id="deviceDPR"></span>
    	<script type="text/javascript">
    		$('#deviceWidth').text(document.documentElement.clientWidth);
    		$('#deviceDPR').text(window.devicePixelRatio);
    	</script>
    </body>
    </html>
    

    在这里插入图片描述

    这是将viewport的width属性设置为“device-width”的情况,假如我们将宽度设置为600px,那么页面将会宽于设备屏幕宽度,也就是说页面此时可以左右滚动。

    我们看到在宽度设置为设备宽度时浏览器宽度显示为375px,然而,事实上iPhone6/7/8的设备宽度应该是750px,那为什么应该与设备一样宽的浏览器宽度却不是750px呢?如果你观察力足够好,相信你已经发现了一些端倪,设备真实宽度正好是浏览器宽度的2倍,而DPR也恰好是2。是的没错,下面给出一个式子:

    DPR= DPR =\frac{设备像素}{设备独立像素}

    • 设备像素:物理像素,设备实际拥有的像素。
    • 设备独立像素:逻辑像素,代表应用使用的像素,例如CSS使用的像素。

    那么我们在知道DPR之后,我们就可以将CSS像素正确转换为设备像素,从而在不同移动端正常显示图片和样式。

    接下来看一下initial-scale这个属性,

    initialscale=initial-scale=\frac{设备宽度}{网页显示宽度}

    也就是说当这个值小于1时,网页是被放大的。

    展开全文
  • viewport:视口,视觉窗口,显示区域。 在显示面积上手机屏幕相对桌面显示器要小很多,在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计,很少考虑到适应手机屏幕,所以如果用手机浏览大多网站时会出现...

    viewport:视口,视觉窗口,显示区域。

    在显示面积上手机屏幕相对桌面显示器要小很多,在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计,很少考虑到适应手机屏幕,所以如果用手机浏览大多网站时会出现问题,比如常见固定宽度的网页会出现横向竖向滑动条,当然这不算什么大问题;但如果是浏览流动布局的网页那情况会非常糟糕,设想一个宽度为30%的侧边栏对于320px手机屏幕而言也就96px,只能容纳8个12px的汉字,可阅读性非常差。

    为了让手机也能获得良好的网页浏览体验,Apple找到了一个办法:在移动版(iOS)的Safari中定义了viewport meta标签,它的作用就是创建一个虚拟的窗口(viewport),而且这个虚拟窗口的分辨率接近于桌面显示器,Apple将其定位为980px。以一代iphone下的Safari来说就是:
    在iphone的320px物理屏幕上——视觉窗口(visual viewport),创建出了一个980px的虚拟窗口——布局窗口(layout viewport),在视觉窗口(visual viewport)中我们可以拖动横向竖向滑动条或者放大缩小网页,来达到最佳的浏览效果(类似桌面浏览器);而布局窗口(layout viewport)用来配合CSS渲染布局,例如当我们设置一个容器的宽度为100%时,这个容器的实际值为980px而不是320px。如此一来大部分 网页就能以缩放的形式正常的显示在手机屏幕上了。

    如何设置viewport

    有了layout viewport似乎解决手机浏览网页的难题,但如果遇到专门为手机优化的网页就又有新的问题:是的,因为iphone的layout viewport默认为980px,导致专为其优化的320px宽的页面只能以缩放的方式显示,这时就需要对viewport进行设置:

    这个是最常见的一条viewport meta代码,将viewport定义为:宽度为设备宽度,初始缩放比例为1倍,禁止用户缩放。设置好后我们的页面就显示完美了:viewport全部属性和值如下:
    width: viewport宽度
    height: viewport高度
    initial-scale: 初始缩放比例
    maximum-scale: 最大缩放比例
    minimum-scale: 最小缩放比例
    user-scalable: 是否允许用户缩放例:width=960 或 device-width
    height=1000 或 device-height
    initial-scale=0.5
    maximum-scale=2
    minimum-scale=1
    user-scalable=1 或 0 (yes 或 no)
    

    layout viewport的默认值在Apple实现viewport后,其他浏览器也加入了对viewport meta的支持,但彼此间还是有些差异,差异最大的是layout viewport的表现:

    Safari iPhone: 980px
    Opera: 850px
    Android WebKit: 800px
    IE: 974px
    

    最后关注下width=device-width其实这个属性值很有意思,字面意应该是viewport宽度等于设备宽度(这里的设备宽度指的并不是物理像素而是设备独立像素,其中设备物理像素和设备独立像素比称为devicePixelRatio),浏览器给出了个定值:320px;这个值还是源于 Apple,因为早期iphone的分辨率为320px × 480px,大量为iphone量身定制的网站都设置了viewport:width=device-width,并且按照宽度320px来设计制作,所 以其他浏览器加入viewport支持时为了兼容性也将device-width定义为了320px。

    展开全文
  • viewport的深入理解

    千次阅读 2018-04-18 16:18:14
    之前写的几篇移动端的知识,然后经过导师的分享,看了荔枝fm的适配,发现自己对viewport的理解并不是很深,于是花了一两天的时间研究viewport和荔枝fm的适配方案。 首先viewport的深入理解,移动前端开发之viewport...

    之前写的几篇移动端的知识,然后经过导师的分享,看了荔枝fm的适配,发现自己对viewport的理解并不是很深,于是花了一两天的时间研究viewport和荔枝fm的适配方案。
    首先viewport的深入理解,移动前端开发之viewport的深入理解 这篇文章真的讲得很好,很细致

    本文文字比较多,因为理论知识比较多,所以希望能够看完,因为本文是参考上面博客和慕课网和各种百度理解之后的总结,看上面博客不理解的东西也在理解之后一并写了出来。

    首先我们先想一个问题,一个宽度1000px的页面在一个逻辑像素320px的手机端上面是怎么显示的?
    首先我们从小学初中时候说起,记得以前都是诺基亚手机,一个诺基亚手机已经很厉害了,博主那时候还没有手机,经常拿老妈的手机刷网页版的qq空间和玩一个叫纵横四海的游戏,那时候手机根本不能完全显示整个网页,只能显示一小部分,通过按钮上下左右移动位置拖动网页,这样体验很不好,于是,浏览器那边就提出了一个虚拟的viewport概念,ios的viewport一般设置成980px而android就比较多,通过这个viewport,移动端的浏览器就可以把整个网页显示在手机屏幕上,整个网页是被缩小的,字体非常难看,需要放大,我们学校的教务系统用手机访问就是这样,需要放大才能填写登录信息。所以,有了viewport之后,移动web设备上是完全显示一个1000px的页面的。

    这里移动端浏览器干了两件事:

    1. 把整个页面在980px的viewport是渲染出来,这里我们一般称之为layout viewport
      为什么需要这个980px的layout viewport来渲染页面呢,试想一下,如果我们把一个1000px的页面渲染在320px的手机端浏览器上,那么,排版就会发生错乱,会有问题,所以才需要一个980px的viewport渲染达到正确排版。
    2. 通过缩放,把整个页面缩小以至于浏览器能够完全显示整个网页。

    然而,layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,ppk把这个viewport叫做 visual viewport(度量viewport/视口viewport)。visual viewport的宽度可以通过window.innerWidth 来获取,但在Android 2, Oprea mini 和 UC 8中无法正确获取。

    我们可以这样理解,把手机分为两层,底层为layout viewport,手机浏览器把页面渲染在这个viewport上,顶层为visual viewport, 我们可以通过缩放控制显示多大的视口。

    不管你是用PC端还是移动端的浏览器去访问一个页面的时候。你所看到的浏览器的窗口就是你visual viewport(通过window.innerWidth/height获取),对于移动端来说,就是你通过浏览器所看到的那部分大小,它的度量单位是px(css中的像素)。这个visual viewport通常是可以变化的,例如你对屏幕进行缩放,这样就可以改变visual viewport的大小,或者你移动屏幕的滚轮,这样就可以改变visual viewport的位置。
    而layout viewport,它就相当于一个大的box,所有的内容都要在这个box里面显示。你通过visual viewport所看到的内容就是layout viewport上的部分内容。

    把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架,你通过它来看这张大图。(译者:可以理解为「管中窥豹」)这个小框架的周围被不透明的材料所环绕,这掩盖了你所有的视线,只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架(缩小)来看整个图片的时候,你可以不用管大图,或者你可以靠近一些(放大)只看局部。你也可以改变框架的方向,但是大图(layout viewport)的大小和形状永远不会变。

    当你进行页面缩放的时,你可以想象你拿着这个小框架离这张大图越来越近了,那么你所看到的大图的内容也越来越少了。原本在未缩放的页面上看起来很小的尺寸,现在通过viewport看上去变大了,事实上这部分的css的px值并没有变化,仅仅是因为进行放大后,css的1px的值所占的屏幕分辨率的值变大了。

    同理,当你缩小整个页面的时候,看到大图的内容也越来越多,同时,原本看起来很大的尺寸,现在再通过viewport看上去的时候又变小了。同理,css的1px的值并没有发生变化,但是1px值所占的屏幕分辨率的值变小了。

    在放大和缩小的过程中,visual viewport和layout viewport的宽,高都没发生任何的变化,变化的仅仅就像是用户拿着这个visual viewport去远离或者靠近layout viewport,在远离或者靠近的过程中,就会呈现出缩放的效果来。

    那么,设计移动web,为什么不使用默认的980px的viewport?

    
     1. 宽度不可控制,不同系统不同设备的默认值可能不同
     2. 页面缩小版显示,交互不友好
     3. 链接不可点
     4. 有缩放,缩放后又有滚动
    

    所以,必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是,首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。

    ideal viewport并没有一个固定的尺寸,不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640,也就是说,在iphone中,css中的320px就代表iphone屏幕的宽度。但是安卓设备就比较复杂了,有320px的,有360px的,有384px的等等,关于不同的设备ideal viewport的宽度都为多少,可以到http://viewportsizes.com去查看一下,里面收集了众多设备的理想宽户。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。

    利用meta标签来设置我们的viewport成为ideal viewport
    既然移动端浏览器的viewport默认是layout viewport为980px(大多数),那么我们怎么修改得到ideal viewport呢,这里我们通过meta标签设置(因为现在移动端有专门的设计稿,所以可以把layout viewport设置成ideal viewport而不用担心排版被破坏)

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:

    width 设置layout viewport 的宽度,为一个正整数,或字符串”width-device”
    initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
    height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
    user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许
    这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

    此外,在安卓中还支持 target-densitydpi 这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素

    target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
    特别说明的是,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。

    因为这个属性只有安卓支持,并且安卓已经决定要废弃target-densitydpi 这个属性

    关于同时设置width和initial-scale的问题
    有时候我们直接设置<meta name="viewport" content="initial-scale=1"> 也可以把当前的的viewport变为 ideal viewport。因为上面的博客有提到缩放是相对ideal viewport来缩放的,所以可以把当前的viewport(layout viewport)设置为ideal viewport的宽度。看了上面那个博客的同学,是不是感到疑惑,那里有一个公式是这样的:

    visual viewport宽度 = ideal viewport宽度  / 当前缩放值
    
    当前缩放值 = ideal viewport宽度  / visual viewport宽度

    那到底initial-scale缩放的是layout viewport还是visual viewport呢,这里我做了几个测试,结果如下:

    1、只设置initial-scale,不设置width

    <meta name="viewport" content="initial-scale=2.0">

    这里写图片描述
    这里写图片描述
    可以看到iphone6和iphone6 plus下layout viewport和visual viewport都改变了

    2、同时设置width和initial-scale
    情况一:<meta name="viewport" content="width=device-width initial-scale=0.5">
    这里写图片描述

    情况2:<meta name="viewport" content="width=device-width initial-scale=2">
    这里写图片描述

    情况3:<meta name="viewport" content="width=800 initial-scale=2">
    这里写图片描述

    由上述几种情况,和上面博客谈到的一些知识,可以知道,initial-scale缩放的实际上是visual viewport的值,而width设置的layout viewport的值,两者如果同时设置,layout viewport会取visual viewport和width的最大值,而单独设置一个,就取那个值,layout viewport的值和visual viewport有一定的关系,所以通过单独设置initial-scale是可以将layout viewport的值设置成ideal viewport

    由上面的图,我们可以得到这样一个公式:

    visual viewport宽度 = ideal viewport宽度 / 当前缩放值
    当前缩放值 = ideal viewport宽度 / visual viewport宽度

    缩放是相对于ideal viewport来缩放的,缩放值越大,当前viewport的宽度就会越小,反之亦然。例如在iphone中,ideal viewport的宽度是320px,如果我们设置 initial-scale=2 ,此时viewport的宽度会变为只有160px了,这也好理解,放大了一倍嘛,就是原来1px的东西变成2px了,但是1px变为2px并不是把原来的320px变为640px了,而是在实际宽度不变的情况下,1px变得跟原来的2px的长度一样了,所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。

    终于写完了,欢迎有不同见解的小伙伴进行评论,大家共同学习学习

    展开全文
  • 什么是viewport

    千次阅读 2018-08-17 17:32:35
    什么是viewport? Viewprot是用户网页的可视区域。 Viewprot翻译为中文可以叫做“视区”。 手机浏览器是把页面房子啊一个虚拟的“窗口(viewport)”比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏...

    什么是viewport?

    Viewprot是用户网页的可视区域。

    Viewprot翻译为中文可以叫做“视区”。

    手机浏览器是把页面房子啊一个虚拟的“窗口(viewport)”比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分;

    个人理解部分:

    浏览器就想一个盒子一样,pc的浏览器和手机浏览器屏幕是不同尺寸大小。同样一套尺寸网页在pc上可以正常浏览,如果没有viewport定义浏览器的尺寸,想pc尺寸一样在手机浏览器上显示,布局可能就乱掉,或者先尺寸比例非常的不协调。

    比如,同样是16号大小的字体,在pc的浏览器中显示刚刚好,但是手机浏览器当中就会像芝麻大小。

    关于PPK三个viewport的理论

    1. layout viewport(布局视口)

    Layout viewportd 宽度大于浏览器的可视区域,就好比你的电脑屏幕宽度是1024,但是你网页的宽度是1400.那么1400就是layout viewport的宽度。

    宽度获取可以通过document.documentElement.clientWidth获取。

    1. Visual viewport(视觉视口)

    Visual Viewport 的宽度就相当于你客户端的屏幕大小。

    宽度获取可以通过 window.innerWidth获取。

    1. Ideal viewport(理想视口)

    Ideal viewport就是我们通常说的屏幕分辨率。

    Dip(设备逻辑像素)跟设备的硬件像素无关的。一个dip在任意像素密度的设备屏幕上占据相同的空间。

    比如说屏幕显示器硬件像素为2880*1800当你设置屏幕分辨率为1920*1200的时候,ideal viewport(理想视口)的宽度值视1920像素。那么dip的宽度值就视1920.设备像素比是1.5(2880/1920).

    设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式:

    逻辑像素宽度*倍率=物理像素宽度

    使用viewport元标签控制布局

    <mate name='viewport' content='width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no'>

    属性介绍

    属性名

    取值

    描述

    Width

    正整数或device-width

    定义视口的宽度,单位为像素

    Height

    正整数或device-height

    定义视口的高度,单位为像素,一般不用

    Initial-scale

    [0.0-10.0]

    定义初始缩放值

    Minimum-scale

    [0.0-10.0]

    定义缩小最小比例,它必须小于或等于maximum-scale

    Maximum-scale

    [0.0-10.0]

    定义放大最大比例,它必须大于等于minimum-scale

    User-scalable

    Yes/no

    定义是否允许手动缩放,默认值yes

    注:device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width.也就是将layout viewport的宽度设置ideal viewport的宽度

    文章借鉴:

    移动前端开发之viewport的深入理解

    说说移动前端中 viewport (视口)

    展开全文
  • 移动端开发之viewport+H5适配

    千次阅读 2018-01-23 13:54:50
    移动端开发之viewport+H5适配 viewport概念 viewport是针对移动端设备的概念。包含三种:layout viewport(布局视口)、visual viewport(可视视口)、ideal viewport(理想视口)。 layout viewport是一张...
  • 移动前端开发之viewport的深入理解

    千次阅读 2015-12-09 14:47:28
    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...
  • 关于HTML5中meta name="viewport" 的用法

    万次阅读 多人点赞 2016-11-01 15:23:46
    vieport,移动端布局
  • viewport

    2020-05-02 10:01:22
    meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串‘device-width’ // ...
  • meta name="viewport" content="width=device-width,initial-scale=1.0" 解释 <meta name="viewport" content="width=device-width,initial-scale=1.0"> content属性值 : width:可视区域的宽度,值可为...
  • ViewPort

    2018-07-25 15:12:50
    Viewport介绍 一、Viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但...
  • Viewport3D 类Viewport3D 类Viewport3D 类

    千次阅读 2008-12-18 14:49:00
    .NET Framework 类库Viewport3D 类<!-- Content type: Devdiv1. Transform: orcas2mtps.xslt. -->更新:2007 年 11 月为三维可视内容提供呈现图面。命名空间: System.Windows.Controls程序集: PresentationFramew
  • HTML5中meta viewport 的用法

    千次阅读 2019-04-24 18:29:38
    移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了好几个像素...
  • 什么是viewport,为什么需要viewport viewport:视口,视觉窗口,显示区域。 在显示面积上手机屏幕相对桌面显示器要小很多,在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计,很少考虑到适应...
  • Viewport

    2018-03-03 05:08:08
    layout viewport(布局视口) 视口的分辨率接近于PC显示器 visual viewport(视觉视口) 手持设备物理屏幕的可视区域 ideal viewport(完美视口) 它类似于布局视口,但宽度和视觉视口相同,用户不用缩放和拖动网页就能够...
  • Meta viewport (视口元信息标签)

    千次阅读 2016-07-18 13:25:21
    前几天在研究移动版开发时,意外查阅到了PPK大神的关于viewport(视口)的研究文档,但无奈全是英文,只好硬着头皮看下去,并顺便试着翻译一下,以备日后回顾。 本人水平有限,如翻译错误,欢迎指正 原文地址:...
1 2 3 4 5 ... 20
收藏数 169,001
精华内容 67,600
关键字:

viewport