跳到主要内容

视口

2023年02月27日
柏拉文
越努力，越幸运

一、Layout Viewport 布局视口​

layout viewport（布局视口），它的宽度默认值是设备厂家指定的 ，为了能够正常显示为桌面设计的网站，一般把这个默认值设置的比较宽 比如980px

获取: 这个 layout viewport 的宽度可以通过 document.documentElement.clientWidth 来获取

作用: 用于解决早期的 PC端页面 在手机上的显示问题

二、Visual Viewport 视觉视口​

visual viewport（视觉视口）表示用户正在看到的网站的区域 （注意：使网站的区域）

获取: visual viewport 的宽度可以通过 window.innerWidth 来获取

三、Ideal viewport 理想视口​

ideal viewport（理想视口）对于移动设备而言，是最理想的视口尺寸

作用: 无论在何种分辨率的屏幕下，那些针对 ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户

四、Viewport 视口控制​

4.1 通过 meta 控制 viewport​

目的: 调整 layout viewport 的宽度 与 ideal viewport 的宽度保持一致（设备有多宽，我们的布局视口就有多宽）

语法:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

属性:

属性作用取值
widthlayout viewport（布局视口）定义视口的宽度，单位为像素正整数 或 device-width
heightlayout viewport（布局视口）定义视口的高度，单位为像素正整数 或 device-height
initial-scale定义初始缩放值[0.0-10.0]
minimum-scale定义缩小最小比例，它必须小于或等于maximum-scale设置[0.0-10.0]
maximum-scale定义放大最大比例，它必须大于或等于minimum-scale设置[0.0-10.0]
user-scalable定义是否允许用户手动缩放页面，默认值yesyes/no

解读:

  • width=device-width : 将 layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度
  • initial-scale=1 : layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度

width=device-width 与 initial-scale=1 的作用相同，但是有各自的缺陷:

  1. width=device-width: 所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但是在 iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时 ideal viewport 的宽度（iphone 和 ipad 横 竖不分）

  2. initial-scale=1: IE 无论是竖屏还是横屏都把宽度设为竖屏时 ideal viewport 的宽度(IE 横竖不分)

  3. 完美解决方案: 两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病， width=device-width则解决了IE的毛病