尊旭网
当前位置: 尊旭网 > 知识 >

viewport

时间:2024-03-02 01:25:05 编辑:阿旭

viewport一般在网页中有什么用途

  手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放


移动端网页设置的viewport 设置target-densitydpi有什么作用

target-densitydpi 这个私有属性,表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
特别说明的是,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。
因为这个属性只有安卓支持,并且安卓已经决定要废弃 target-densitydpi 这个属性了,尽量避免使用这个属性。


我写了一个html网页,添加了<meta name="viewport"content="width=device-width, initial-scale=1"/>后就

手机页面的话html的头部最好先加上<meta name="viewport" content="width=device-width, initial-scale=1.0minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>这种标签,表示是根据手机屏幕1:1显示的页面。这种情况需要用百分比来编写样式的宽度大小或者用JS判断根据不同的屏幕分辨率来编写不同的样式大小,这样才能确保你的样式能正确的占满全屏。设定数值的单位最好用em或rem这种相对单位来设定,这样可以适应不同分辨率的字体大小显示,这样设置的缺点是数值设定有些模糊,不够精准,不能百分百保证所有分辨率页面显示效果完全一致;优点是不必麻烦的根据不同分辨率去写不同大小的样式。网页是一个文件,通常是HTML格式(文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页通常要透过网页浏览器来阅读。根据W3C对于WEB PAGE的定义,网页是一个信息的集合,其内容包含一个或多个网络资源的信息,同时预期使其成为单一个URI。进一步说,一个网页其包含一个或多个嵌入于网页中的网络资源使其成为单一个URI档案(HTML),而该URI并不再嵌入于其他档案之中。网页是构成网站的基本元素,是承载各种网站应用的平台。

viewport可以适配pad吗

由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因,2012年末一淘新首页对1200px、990px、750px(for ipad)这3个尺寸的响应不同布局,期望在ipad下横屏显示990px版本,竖版显示750版本,iphone下显示750版本。不同设备尺寸的不同显示自然少不了viewport设置,目前W3C针对viewport的规范还处于草案阶段,有2种方式可以设置页面的viewport,viewport meta标签和@viewport css方式。
viewport meta element

"viewport"
content="width=device-width,initial-scale=1.0">


该viewport meta支持以下6个属性,ios对viewport meta的实现对比W3C规范草案:

属性
safari的实现
W3C规范草案

width 可视区域的宽度,默认是980px,取值区间[200,10000];ios 1.0及以上支持 可视区域的宽度,取值区间[1,10000]
height 可视区域的高度,默认为根据设备的宽高比再根据宽度计算出,取值范围为[223,10000];ios 1.0及以上支持 可视区域的高度,取值区间为[1~10,000]
initial-scale 初始化缩放比例,默认根据可显示区域适应页面大小计算出的,取值区间为[minimum-scale,maximum-scale];ios 1.0及以上支持 初始化缩放比例,取值区间[0.1, 10]
minimum-scale 最小缩放比例,默认0.25,取值区间为[>0,10];ios 1.0及以上支持 最小缩放比例,取值区间为[0.1, 10]
maximum-scale 最大缩放比例,默认5.0,取值区间为[>0,10];ios 1.0及以上支持 最大缩放比例,取值区间为[>0,10]
user-scalable 是否允许用户手动缩放,默认yes,不允许为no;ios 1.0及以上支持 是否允许用户手动缩放,yes or no
viewport meta方式大部分移动浏览器都支持,如:safari、ff、ie、opera……
@viewport css
如:

@viewport {
width:
device-width;
zoom:
2.0;
}


  • 上一篇:veb
  • 下一篇:没有了