移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。

(1) layout viewport(布局视口)

一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

(2) visual viewport(视觉视口)和物理像素

visual viewport(视觉视口)设备物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。例如iPhone的物理像素:

  • iPhone5 :640 * 1136
  • iPhone6:750 * 1334
  • iPhone6 Plus:1242 * 2208

(3) ideal viewport(理想视口)和dip(设备逻辑像素)

ideal viewport(理想视口)通常是我们说的屏幕分辨率。

dpi (设备逻辑像素)跟设备的硬件像素无关的。一个 dpi 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina (视网膜)屏显示器硬件像素是:2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候,ideal viewport(理想视口)的宽度值是1920像素, 那么 dpi 的宽度值就是1920。设备像素比是1.5(2880/1920)。设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式:

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dpi 的值就是 ideal viewport(理想视口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:

  1. iPhone5 :分辨率 320 * 568,物理像素 640 * 1136,@2x
  2. iPhone6:分辨率 375 * 667,物理像素 750 * 1334,@2x
  3. iPhone6 Plus :分辨率 414 *  736,物理像素1242 * 2208,@3x,(注意,实际显示图像等比降低至1080×1920,具体原因查看:http://www.css88.com/archives/5972

(4) CSS像素

CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如 width: 100px)是以CSS像素为单位指定的。CSS像素与 dpi 的比例即为网页的缩放比例,如果网页没有缩放,那么一个CSS像素就对应一个 dpi(设备逻辑像素) 。

(5) 使用viewport元标签控制布局

首先看一下viewport元标签极其属性:

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0;

属性名 取值 描述
width 正整数 或 device-width 定义视口的宽度,单位为像素
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

width

width属性被用来控制layout viewport(布局视口)的宽度,layout viewport(布局视口)宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width,例如:

  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width=device-width 也就是将layout viewport(布局视口)的宽度设置 ideal viewport(理想视口)的宽度。网页缩放比例为100%时,一个CSS像素就对应一个 dpi(设备逻辑像素),而layout viewport(布局视口)的宽度,ideal viewport(理想视口)的宽度(通常说的分辨率),dpi 的宽度值是相等的。

height

与width类似,但实际上却不常用。

initial-scale

initial-scale用于指定页面的初始缩放比例:

  1. <meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度,initial-scale=1.5 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度的1.5倍。

maximum-scale

maximum-scale用于指定用户能够放大的最大比例,例如

  1. <meta name="viewport" content="initial-scale=1,maximum-scale=3" />

假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。

minimum-scale

类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。

user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes,可被缩放,你也可以将该值设置为no,表示不允许用户缩放网页。例如:

  1. <meta name="viewport" content="user-scalable=no" />

移动前端中viewport(视口) 转的更多相关文章

  1. 说说移动前端中 viewport (视口)

    转载网络资源的文章:来源不详~~ 移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设 ...

  2. 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  3. 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询

    前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...

  4. 浅谈移动端中的视口(viewport)

    在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. ...

  5. html5中viewport使用

    html5中viewport使用 转载自:http://www.maoegg.com/the-usage-of-viewport-in-html5/ 用html5开发移动应用时往往会遇到手机的分辨率或 ...

  6. 前端中的SEO

    前端中的SEO: mate.title META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). <Meta name="Keywords" ...

  7. 利用 SPICE 分析理解心电图前端中的右腿驱动

      [导读] 心电图(ECG)学是一门将心脏离子去极(ionic depolarization) 后转换为分析用可测量电信号的科学.模拟电子接口到电极/患者设计中最为常见的难题之一便是优化右腿驱动 ( ...

  8. 从前端中的IOC理念理解koa中的app.use()

    忙里偷闲,打开平时关注的前端相关的网站,浏览最近最新的前端动态.佼佼者,平凡的我做不到,但还是要争取不做落后者. 前端中的IoC理念,看到这个标题就被吸引了.IoC 理念,不认识呢,点击去一看,果然没 ...

  9. ExtJs 中Viewport的介绍与使用

    ExtJs 中Viewport的介绍与使用 VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例 ...

随机推荐

  1. 使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式

    使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角且颜色由上而下渐变的样式,显得超级恶心,而且文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜 ...

  2. java pio项目使用

    一.简介 pio是apache的一个针对microsoft office的一个开源项目. Apache POI - the Java API for Microsoft Documents 官网地址: ...

  3. android-ProgressBar

    制定ProgressBar显示风格 * 参考系统自带的进度条 * ProgressBar分类 * 可以精确显示进度(可以显示刻度和百分比) * 不可以精确显示进度 * 标题上ProgressBar的设 ...

  4. [转] - MC、MC、MCMC简述

    贝叶斯集锦(3):从MC.MC到MCMC 2013-07-31 23:03:39 #####一份草稿 贝叶斯计算基础 一.从MC.MC到MCMC 斯坦福统计学教授Persi Diaconis是一位传奇 ...

  5. svn学习笔记(1)入门学习----安装及创建运行仓库

    学习及使用svn有一段时间了,但是以前学习的时候不怎么用,现在用只是简单的更新上传,又把基本理论忘了.为了以后自己看自己的笔记回忆,特此记录 svn学习博客:http://www.cnblogs.co ...

  6. Hibernate HQL的update方法详解

    虽然hibernate提供了许多方法对数据库进行更新,但是这的确不能满足开发需要.现在讲解一下用hql语句对数据进行更新. 不使用参数绑定格式String hql="update User ...

  7. 自动删除Mysql备份(数组+for)

    #!/bin/bash #author:V #Dispaly:auto delete mysql backup. BACKDIR=(/home/11/mysqlbackup/ /home/full/) ...

  8. js 将一段html插入到body最前面

    var wrap=document.createElement("div"); var first=document.body.firstChild;//得到页面的第一个元素 va ...

  9. Python的全局变量

    应该尽量避免使用全局变量.不同的模块都可以自由的访问全局变量,可能会导致全局变量的不可预知性.对全局变量,如果程序员甲修改了_a的值,程序员乙同时也要使用_a,这时可能导致程序中的错误.这种错误是很难 ...

  10. 【iCore3 双核心板】例程十四:FATFS实验——文件操作

    实验指导书及代码包下载: http://pan.baidu.com/s/1dEpechF iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...