首页 > 云开发 > Css > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

viewport&像素

Css

viewport是什么

移动端中,分为两个视口:

layout viewport 布局视口: 视口的分辨率接近于PC显示器,也就是html的宽度接近于pc端的宽度。

visual viewport 视觉视口: 手机的物理可视窗口,不借助滚动条所看到的内容。

移动设备的viewport默认是layout viewport
可以这两理解,有一个图片(layout viewport),宽度是:1090 1090,有一个画框(visual viewport),宽度是:320 460,用户通过画框来看画。当layout viewport与visual viewport完全一致时,用户通过画框看到的就是整个画。如果layout viewport较大,用户需要通过移动画框来查看画面内容。

meta中的viewport
viewport是meta中的一个值,通过设置viewport,可以控制浏览器如何规范的渲染Web页面
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,如果initial-scale和viewport有冲突,浏览器会取比较大的值。

viewport值:

name value Description
width 正整数或device-width 定义视口(layout viewport)的宽度,单位为像素,
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 pixel

屏幕上的像素。是物理像素。 设备像素可能不相同

物理像素不会改变,单位是pt。

1pt = 1/72(inch),inch及英寸,而1英寸等于2.54厘米

举个

文章来源:segmentfault,作者:oylp。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索