视口(viewport)

2018-02-24 15:46 更新

讲述meta视口标签和媒体查询相关的内容。

示例代码:

<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width:480px) {
    // some style
}

像素(pixel)

  • 设备像素:设备屏幕的物理像素。
  • CSS像素:为Web开发者创造的,在CSS和JS中使用的一个抽象层。

CSS像素和设备像素的比例取决于屏幕是否高DPI和用户缩放的比例。

三个视口

桌面上视口宽度等于浏览器宽度,但在手机上有所不同。

  • 布局视口。手机上为了容纳为桌面浏览器设计的网站,默认布局视口宽度远大于屏幕宽度,为了让用户看到网站全貌,它会缩小网站。
  • 视觉视口。用户正在看到的网站的区域,与设备屏幕一样宽。
  • 理想视口。当网站是为手机准备的时候使用。使用meta声明。早期iPhone理想视口为320*480px。

缩放

桌面浏览器的缩放仅改变内容尺寸,不改变布局视口;移动端缩放则整体改变。

不要禁止缩放。

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

禁止缩放是邪恶的,并且浏览器可以关闭禁止缩放功能。

分辨率

物理分辨率:设备每英寸内点数(DPI)。

设备像素比:设备像素个数和理想视口的比(DPR)。

dppx和dpi:每一个像素的点数。JS中的window.devicePixelRatio和媒体查询的device-pixel-ratio的单位。IE不支持,因此要使用dpi单位:

if(window.devicePixelRatio) {
    // DPR大于等于2时执行
}

@media all and((-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi)) {
    // DPR大于等于2时生效
}

1dppx = 96dpi:一英寸对应CSS中96个像素。

meta视口

<meta name="viewport" content="name=value,name=value">

其中可用的name为:

  • width:device-width适用于大多数情况。
  • initial-scale:一般设为1,为了兼容应同时设置width=device-width。
  • minimum-scale
  • maximum-scale
  • user-scalable

媒体查询

媒体类型:目前只有print被正确实现。一般使用all。

Web开发者希望区分能力弱和能力强的浏览器,而弱浏览器为了避免探测开始伪装自己。

过去的浏览器最多可处理WAP和HTML的子集XHTML-MP,它们大都遵循标准并实现handheld,Web开发者为这些类型提供简单的样式。而新的现代移动浏览器出现后,它们支持全部样式、JS,因此宁愿不实现handheld而获得和桌面浏览器一样的待遇。

JavaScript

媒体查询与JavaScript属性相对应。

  • 物理屏幕分辨率:screen.width/height(有兼容问题不建议使用)
  • 布局视口:document.documentElement.clientWidth
  • 视觉视口:window.innerWidth
  • 理想视口:screen.width/height(有兼容问题不建议使用)
  • 设备像素比:window.devicePixelRatio
  • 屏幕方向:window.orientation
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号