viewport&像素

hankkin 发布于2019-08-30 15:56 / 967人阅读

摘要：屏幕分辨率是指一块屏幕中画面水平方向的像素值画面垂直方向的像素值。图像分辨率是指每英寸图像内的像素点数。图像分辨率是有单位的，叫像素每英寸。设备像素可能不相同物理像素不会改变，单位是。及英寸，而英寸等于厘米举个

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页面

要把当前的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厘米

举个

专线服务云服务器 viewport viewport布局屏幕像素实际像素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117560.html

前端-CSS3&amp;H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&amp;H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
前沿穿越——HTML5小游戏制作技巧&amp;经验

摘要：我先来列一排动画效果给大家看原文中此图已挂图图图刚才上面列的动画效果分别是动画动画逐帧动画。事件会在结束后触发。不可否认，做动画是走在前面的，它的很多表现形式都值得我们借鉴，比如说这位豌豆射手。转 K米: 前沿穿越——HTML5小游戏制作技巧&经验 hello~大家好，我是黑米！Ｏ(≧▽≦)Ｏ今天我来跟大家分享一些动画实现的相关知识，希望大家能够支持(鞠躬…… 我很喜欢很...

explorer_ddf 2019-08-02 18:09 评论0 收藏0
图像延迟加载 &amp;&amp; 列表图顺序加载

摘要：此外，跟踪尚未延迟加载的元素数量，以及取消绑定滚动事件处理程序的繁琐工作将由开发者来完成。图像延迟加载列表图顺序加载的组件已经开源啦有兴趣的同学可以查看使用起来非常简单图片延时加载十分重要，尤其是对于移动端用户。从理论上来看，图像延迟加载机制十分简单，但实际上却有很多需要注意的细节。此外，有多个不同的用例均受益于延迟加载。首先，我们来了解一下在 HTML 中延迟加载内联图像。延迟加载...

ghnor 2019-05-23 17:33 评论0 收藏0
响应式布局----像素密度与viewport

摘要：首先举个例子，的像素分辨率为英寸。像素密度定义代表的就是像素密度指的是每英寸的长度上排列的像素点数量。物理尺寸如图可以知道，英寸也就指的是屏幕对角线的物理长度。英寸是一个固定长度，等于厘米。显示效果如下如图看出显示要比清晰的多。首先举个例子，iphone6s的像素分辨率为1334x750,326ppi,4.7英寸。如图下面我们一个一个来解释。showImg(https://segme...

tain335 2019-08-30 12:44 评论0 收藏0