search

Ray-56 / Daily

每日
7 stars 1 forks source link

第四题：解释一下 viewport #4

Open Ray-56 opened 5 years ago

Ray-56 commented 5 years ago

属性、值以及常见用法

GenXiaoLe commented 5 years ago

viewport

  1. 简介 中文翻译为“视图”或者“窗口”，表示的是用户网页或者屏幕的可视范围，通常针对PC端和移动端网页会设置不同的属性只进行调整。
  2. 属性
    • width：控制viewport的宽度，可以被指定，例如：width = 500px(也可传device-width，即为屏幕宽度)；
    • height：控制viewport的高度，如上；
    • initial-scale：初始缩放比例，即每一次加载时页面缩放的比例，例如：initial-scale = 1.0；
    • maximum-scale：允许用户缩放到的最大缩放比例， 例如：maximum-scale = 1.0；
    • minimum-scale：允许用户缩放到的最小缩放比例，例如：minimum-scale = 1.0；
    • user-scaleable：是否允许用户缩放，传值为“yes” or “no”， 例如：user-scaleable = yes;
  3. 其他： 浏览器和移动端的屏幕宽度并不是1:1的关系，比如：以iPhone6/7/8为例，用浏览器显示移动设备的宽度为375px，但是实际在设备中的真实宽度为750px。这其中涉及到一个要素DPR(device pixel ratio，通常称为设备像素比)，设备像素比(DPR)=物理像素(physical pixel，显示器上最小的物理显示单元)/设备独立像素(density-independent pixel，也称逻辑像素，代表css像素之类可以被程序使用的虚拟像素)，而例子中移动设备的DPR为2，所以真实宽度是浏览器的两倍。
MMmaXingXing commented 5 years ago
viewport 定义

viewport是用户网页的可视区域,中文翻译为视区.通俗理解即设备屏幕上用于显示我们网页的那一部分区域.

属性

viewport 通过meta标签设置 示例如下

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

常见属性有

常见用法

移动端自适应 常设置 

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