`
流浪鱼
  • 浏览: 1682062 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

viewport 虚拟窗口

 
阅读更多

 

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"/>

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    html meta viewport属性说明

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...

    详解VC++中的窗口与视口

    窗口是基于逻辑坐标系的虚拟窗口,用于绘图和数据显示。在窗口中,坐标单位可以是毫米、厘米、像素点等,与显示设备无关。窗口的坐标系称为“窗口”,其x轴向右,y轴向上。 视口(Viewport) 视口是基于设备坐标系...

    windows WinExtent ViewPort

    视口(ViewPort)是DC中的一个虚拟区域,它定义了实际输出到屏幕或打印介质的可视部分。视口的大小和位置可以调整,当改变视口时,可以实现图像的缩放或移动效果。例如,当你在看地图应用时,拖动地图或者放大缩小,...

    HTML meta viewport属性详细说明

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...

    自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    例如,使用meta name="viewport" content="width=device-width"时,width既可以是phys.width,也可以是虚拟窗口的width。这样就会出现两个结果:一是iPhone 6的phys.width变成了css-width,即375px;二是虚拟窗口的...

    图形中窗口,视区的关系

    在计算机图形学中,窗口(Window)和视区(Viewport)是两个重要的概念,它们在图形渲染和用户交互中起到至关重要的作用。本篇将详细解释这两个概念以及它们之间的关系。 首先,窗口是我们所说的图形用户界面(GUI...

    响应式 Web 设计 – Viewport

    手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平...

    HTML5 移动页面自适应手机屏幕四类方法总结

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

    viewport 的基本原理以及详细使用方法

    【viewport】的概念是移动网页开发中的关键要素,它是一个虚拟的屏幕区域,用于在移动设备上呈现网页内容。移动端浏览器为了适应各种尺寸的屏幕,会在一个比实际屏幕更宽的窗口内渲染页面,这个窗口就是viewport。...

    HTML5移动端开发中的Viewport标签及相关CSS用法解析

    布局视口是浏览器默认设定的一个虚拟窗口,它的大小通常大于实际屏幕尺寸,目的是为了让PC端设计的网页在手机上也能完整显示。例如,iOS和Android设备默认将其设置为980px宽。这样,虽然网页内容能完整呈现,但元素...

    图文并茂让你必须弄懂 viewport

    物理分辨率是指显示器的物理像素数量,通常用screen.width/height来表示,它们不会因浏览器窗口大小的变化而改变。逻辑像素是CSS像素,是浏览器渲染网页内容时使用的像素单位,会受到缩放的影响。DPR(Device Pixel ...

    Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip

    由于手机屏幕较小,不能一次性显示整个网页,所以视口提供了一个虚拟的窗口,用户可以通过滑动来查看网页的其他部分。在默认情况下,视口宽度通常设置为设备宽度,但可以通过meta标签进行自定义。 2. **meta视口...

    px-viewport:像素和视口转换器

    视口可以理解为浏览器用来显示网页内容的可视区域,它不仅包括设备的物理屏幕尺寸,还包括用户缩放时的虚拟空间。在桌面浏览器上,视口通常等于浏览器窗口的大小;但在移动设备上,为了适应各种屏幕尺寸,视口可以被...

    html5开发之viewport使用

    `viewport` 是浏览器用来确定网页可视区域的一个虚拟窗口,它允许开发者控制网页在不同尺寸屏幕上的表现。当我们在不同分辨率和屏幕大小的手机上浏览网页时,`viewport` 的设置能够确保内容正确地呈现,避免出现缩放...

    Extended Window Manager Hints

    - **大桌面**:允许窗口跨越多个虚拟桌面。 - **粘滞窗口**:即使切换到其他桌面,此类窗口仍然可见。 - **虚拟桌面**:定义了如何管理和操作虚拟桌面。 - **分页器**:用于在多个虚拟桌面间导航的用户界面组件。 - ...

    修改VMware下Ubuntu界面分辨率过高问题

    方法是去掉原来的默认的颜色深度,增加几组子段 Subsection "Display",在子段中,列举出相应的 Modes 模式(也就是分辨率),Depth 颜色深度,以及 ViewPort(应该是视图顶点,为 0 0),需要注意的是:这几组中的...

Global site tag (gtag.js) - Google Analytics