viewport 语法介绍:
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
“/>
width
控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height
和 width 相对应,指定高度。
initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
(设置屏幕宽度为设备宽度,禁止用户手动调整缩放) <meta name="viewport" content="width=device-width,user-scalable=no" /> (设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放) <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
相关推荐
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...
窗口是基于逻辑坐标系的虚拟窗口,用于绘图和数据显示。在窗口中,坐标单位可以是毫米、厘米、像素点等,与显示设备无关。窗口的坐标系称为“窗口”,其x轴向右,y轴向上。 视口(Viewport) 视口是基于设备坐标系...
视口(ViewPort)是DC中的一个虚拟区域,它定义了实际输出到屏幕或打印介质的可视部分。视口的大小和位置可以调整,当改变视口时,可以实现图像的缩放或移动效果。例如,当你在看地图应用时,拖动地图或者放大缩小,...
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...
例如,使用meta name="viewport" content="width=device-width"时,width既可以是phys.width,也可以是虚拟窗口的width。这样就会出现两个结果:一是iPhone 6的phys.width变成了css-width,即375px;二是虚拟窗口的...
在计算机图形学中,窗口(Window)和视区(Viewport)是两个重要的概念,它们在图形渲染和用户交互中起到至关重要的作用。本篇将详细解释这两个概念以及它们之间的关系。 首先,窗口是我们所说的图形用户界面(GUI...
手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平...
手机浏览器是把页面放在一个虚拟的窗口(viewport)中,通常这个虚拟的窗口(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放...
【viewport】的概念是移动网页开发中的关键要素,它是一个虚拟的屏幕区域,用于在移动设备上呈现网页内容。移动端浏览器为了适应各种尺寸的屏幕,会在一个比实际屏幕更宽的窗口内渲染页面,这个窗口就是viewport。...
布局视口是浏览器默认设定的一个虚拟窗口,它的大小通常大于实际屏幕尺寸,目的是为了让PC端设计的网页在手机上也能完整显示。例如,iOS和Android设备默认将其设置为980px宽。这样,虽然网页内容能完整呈现,但元素...
物理分辨率是指显示器的物理像素数量,通常用screen.width/height来表示,它们不会因浏览器窗口大小的变化而改变。逻辑像素是CSS像素,是浏览器渲染网页内容时使用的像素单位,会受到缩放的影响。DPR(Device Pixel ...
由于手机屏幕较小,不能一次性显示整个网页,所以视口提供了一个虚拟的窗口,用户可以通过滑动来查看网页的其他部分。在默认情况下,视口宽度通常设置为设备宽度,但可以通过meta标签进行自定义。 2. **meta视口...
视口可以理解为浏览器用来显示网页内容的可视区域,它不仅包括设备的物理屏幕尺寸,还包括用户缩放时的虚拟空间。在桌面浏览器上,视口通常等于浏览器窗口的大小;但在移动设备上,为了适应各种屏幕尺寸,视口可以被...
`viewport` 是浏览器用来确定网页可视区域的一个虚拟窗口,它允许开发者控制网页在不同尺寸屏幕上的表现。当我们在不同分辨率和屏幕大小的手机上浏览网页时,`viewport` 的设置能够确保内容正确地呈现,避免出现缩放...
- **大桌面**:允许窗口跨越多个虚拟桌面。 - **粘滞窗口**:即使切换到其他桌面,此类窗口仍然可见。 - **虚拟桌面**:定义了如何管理和操作虚拟桌面。 - **分页器**:用于在多个虚拟桌面间导航的用户界面组件。 - ...
方法是去掉原来的默认的颜色深度,增加几组子段 Subsection "Display",在子段中,列举出相应的 Modes 模式(也就是分辨率),Depth 颜色深度,以及 ViewPort(应该是视图顶点,为 0 0),需要注意的是:这几组中的...