HTML5挪动端开发设计中的Viewport标识及有关CSS用法

2021-02-24 11:02 jianzhan

挪动前端开发中常说的 viewport (视口)便是访问器显示信息网页页面內容的显示屏地区。在其中涉及到几个关键定义是 dip ( device-independent pixel 机器设备逻辑性像素 )和 CSS 像素之间的关联。这里最先掌握下列几个定义。

layout viewport(合理布局视口)

1般挪动机器设备的访问器都默认设置设定了1个viewport 元标识,界定1个虚似的layout viewport(合理布局视口),用于处理初期的网页页面在手机上上显示信息的难题。iOS, Android基础都将这个视口辨别率设定为 980px,因此pc上的网页页面基础能在手机上上展现,只但是元素看上去很小,1般默认设置能够根据手动式放缩网页页面。

visual viewport(视觉效果视口)和物理学像素

visual viewport(视觉效果视口)备物理学显示屏的可视性地区,屏幕上显示器的物理学像素,一样规格的显示屏,像素密度大的机器设备,硬件配置像素会更多。比如iPhone的物理学像素:

iPhone5 :640 * 1136
iPhone6:750 * 1334
iPhone6 Plus:1242 * 2208
ideal viewport(理想化视口)和 dip (机器设备逻辑性像素)

ideal viewport(理想化视口)一般是大家说的显示屏辨别率。

dip (机器设备逻辑性像素)跟机器设备的硬件配置像素不相干的。1个 dip 在随意像素密度的机器设备显示屏上都占有同样的室内空间。

例如MacBook Pro的 Retina (眼底黄斑)屏显示信息器硬件配置像素是:2880 * 1800。当你设定显示屏辨别率为 1920 * 1200 的情况下,ideal viewport(理想化视口)的宽度值是1920像素, 那末 dip 的宽度值便是1920。机器设备像素比为1.5(2880/1920)。机器设备的逻辑性像素宽度和物理学像素宽度(像素辨别率)的关联考虑以下公式:

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

而挪动端手机上显示屏一般不能以设定辨别率,1般全是机器设备厂家默认设置设定的固定不动值,换句话说 dip 的值便是 ideal viewport(理想化视口)(也便是辨别率)的值,例如,iPhone的显示屏辨别率:

iPhone5 :辨别率 320 * 568,物理学像素 640 * 1136,@2x
iPhone6:辨别率 375 * 667,物理学像素 750 * 1334,@2x
iPhone6 Plus :辨别率 414 *  736,物理学像素1242 * 2208,@3x,(留意,具体显示信息图象等比减少至1080×1920,实际缘故大家文章内容最终会附带详细介绍)

CSS像素

CSS像素(px)用于网页页面合理布局的企业。款式的像素规格(比如 width: 100px)是以CSS像素为企业特定的。CSS像素与 dip 的占比即为网页页面的放缩占比,假如网页页面沒有放缩,那末1个CSS像素就对应1个 dip(机器设备逻辑性像素) 。

应用viewport元标识操纵合理布局

最先看1下viewport元标识极为特性:

CSS Code拷贝內容到剪贴板
  1. <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">  

这里是每一个特性的详尽详细介绍:
特性名 赋值 叙述 width 正整数金额 或 device-width 界定视口的宽度,企业为像素 height 正整数金额 或 device-height 界定视口的高宽比,企业为像素,1般无需 initial-scale [0.0⑴0.0] 界定原始放缩值 minimum-scale [0.0⑴0.0] 界定变小最少占比,它务必小于或等于maximum-scale设定 maximum-scale [0.0⑴0.0] 界定变大最大占比,它务必超过或等于minimum-scale设定 user-scalable yes/no 界定是不是容许客户手动式放缩网页页面,默认设置值yes
width

width特性被用来操纵layout viewport(合理布局视口)的宽度,layout viewport(合理布局视口)宽度默认设置值是机器设备厂家特定的。iOS, Android基础都将这个视口辨别率设定为 980px。大家能够 width=320 这样设为准确的像素数,还可以设为device-width这1独特值,1般以便自融入合理布局,广泛的做法是将width设定为device-width,比如:

CSS Code拷贝內容到剪贴板
  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

width=device-width 也便是将layout viewport(合理布局视口)的宽度设定 ideal viewport(理想化视口)的宽度。网页页面放缩占比为100%时,1个CSS像素就对应1个 dip(机器设备逻辑性像素),而layout viewport(合理布局视口)的宽度,ideal viewport(理想化视口)的宽度(一般说的辨别率),dip 的宽度值是相同的。

height

与width相近,但具体上却不常见。

initial-scale

initial-scale用于特定网页页面的原始放缩占比:

CSS Code拷贝內容到剪贴板
  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用于特定客户可以变大的最大占比,比如

CSS Code拷贝內容到剪贴板
  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,表明不容许客户放缩网页页面。比如:

CSS Code拷贝內容到剪贴板
  1. <meta name="viewport" content="user-scalable=no" />  


PS:有关iPhone 的显示屏辨别率
iPhone 6 Plus 官方标称显示屏是 1920 x 1080 的,可是在 Xcode 中大家发现仿真模拟器的显示屏实际上是看似怪异的 2208 × 1242,为何呢?

这个变小 17% 的占比是这么来的呢?看来 Stack Overflow 上的回应:iPhone 6 Plus resolution confusion: Xcode or Apple’s website? ,简易来讲便是以便切图的变大倍数、具体3D渲染像素全是正整数金额。