Skip to content

[html] 第10天 viewport常见设置都有哪些? #28

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第10天 viewport常见设置都有哪些?

Activity

hbl045

hbl045 commented on May 5, 2019

@hbl045

用于移动端显示

tiyunchen

tiyunchen commented on Jun 1, 2019

@tiyunchen
  • width: width=device-width
  • initial-scale
  • maximum-scale
  • user-scalable
AricZhu

AricZhu commented on Jun 24, 2019

@AricZhu
No description provided.
Konata9

Konata9 commented on Jul 25, 2019

@Konata9

在移动端做开发时,必须要搞清楚 viewport 这一设置。

viewport 就是视区窗口,也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域,但在移动端上 viewport 会超出设备的显示区域(即会有横向滚动条出现)。
设备默认的 viewport 在 980 - 1024 之间。

为了让移动端可以很好地显示页面,因此需要对 viewport 进行设置。相关的设置值如下:

设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许

viewport 是在 meta 标签内进行控制。

// width=device-width, initial-scale=1.0 是为了兼容不同浏览器
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

相关的衍生知识: dpr 与 CSS 像素。CSS 像素的 1px 在 PC 端上与设备的物理像素基本一致,而到手机端就会有两个物理像素对应一个 CSS 像素的情况出现(如 iPhone 的视网膜屏)。
所以 iPhone 上的 dpr = 2 即 2 个物理像素 / 一个 CSS 像素(独立像素)

参考文章:移动前端开发之 viewport 的深入理解

censek

censek commented on Oct 11, 2019

@censek

viewport

手机浏览器把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
属性名 取值 描述
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
kruzabc

kruzabc commented on Dec 26, 2019

@kruzabc

上面已经说了很多了,我补充下:

  1. viewport 基本上只对移动端网页有用,一般移动端的网页我们是这么写的:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1 minimum-scale=1 user-scalable=no”>

window.outerWidth 是屏幕宽度,这是固定不变的 。
window.innerWidth 是视口宽度
document.documentElement.clientWidth 也就是标签的宽度。
后面两个值都要根据前面的进行换算。

如何换算?

首先我们要定义个变量scale``? 根据标签里的 initial-scale=1, maximum-scale=1 minimum-scale=1`算出来的, 如果不指定这三个默认是1, 我们定义scale表示缩放比,scale默认等于1

meta标签width和height属性都有默认值
width: 默认是 980 / scale, 单位px, 如果设置为device-width, 则使用window.outerWidth 的值
height: 默认是 980 / (window.outerWidth / window.outerHeight) / scale , 单位px

但如果width和height只有一个属性有值。
会根据 width / height == window.outerWidth / window.outerHeight 这样的换算关系算出对应的width和height。

几个属性的计算规则:

window.innerWidth = window.outerWidth / scale
document.documentElement.clientWidth  = Math.max(width, window.innerWidth) // 不能小于innerWidth

如果我们加上了开头那句meta标签,我们的网页就不能缩放,放大比例为1
也就是下面三个值相等:
window.outerWidth == window.innerWidth == document.documentElement.clientWidth
最后:屏幕尺寸=视口尺寸=html尺寸(html标签)

larry0442

larry0442 commented on Apr 7, 2020

@larry0442
<meta
  name="viewport"
  content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0 user-scalable=0"
/>

还有其他漏了的吗

blueRoach

blueRoach commented on May 26, 2020

@blueRoach
  • width:控制viewport的大小。可设置的值:数字,device-width
  • height:width同理
  • initial-scale:初始缩放比例,也就是第一次加载的时的缩放比例
  • maximum-scale:允许用户最大缩放到的比例
  • minimum-scale:允许用户最小缩放到的比例
  • user-scalable:是否允许用户缩放

常规移动端设置

giggleCYT

giggleCYT commented on Jun 3, 2020

@giggleCYT
设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许
smile-2008

smile-2008 commented on Sep 4, 2020

@smile-2008
设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许
buuug7

buuug7 commented on Jan 9, 2021

@buuug7

react官方推荐的写法,其他的乱七八糟的请忘记把

<meta name="viewport" content="width=device-width, initial-scale=1" />
xiezhenghua123

xiezhenghua123 commented on Apr 11, 2021

@xiezhenghua123

移动端开发必须要知道viewport

lxt-ing

lxt-ing commented on Apr 16, 2021

@lxt-ing

viewport 属性 :width:宽,height:高,initial-scale:初始缩放比例,user-scalable:允许用户手动缩放,maximum-scale:最大缩放比例,minimum-scale:最小缩放比例。

amikly

amikly commented on Oct 28, 2021

@amikly

概念

viewpoint是视区窗口,就是浏览器中显示网页的部分。

PC端上基本等于设备显示区域,但在移动端上viewpoint会超过设备的显示区域(会有横向滚动条的的出现)

设备默认的viewpoint在 980 - 1024 之间

属性设置

<!-- width=device-width, initial-scale=1.0 是为了兼容不同浏览器 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
属性名 取值 作用
width 正整数 | device-width 定义视口的宽度,单位为像素
height 正整数 | device-height 定义视口的高度,单位为像素,一般不用
initial-scale [ 0.0 - 10.0 ] 定义初始缩放值
minimum-scale [ 0.0 - 10.0 ] 定义缩小最小比例,它必须小于或等于maximun-scale设置
maximum-scale [ 0.0 - 10.0 ] 定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes(1) | no(0) 定义是否允许用户手动缩放页面,默认值yes
yxllovewq

yxllovewq commented on Mar 7, 2022

@yxllovewq

总结:

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

content可选值:
width: 布局视口宽度
height:布局视口高度
initial-scale:初始缩放比
maximum-scale:最大放大比例
minimum-scale:最大缩小比例
user-scalable:用户是否可缩放

syfine

syfine commented on Apr 12, 2022

@syfine
  • width:布局视口宽度
  • height:布局视口高度
  • initial-scale:初始缩放比
  • maximum-scale:最大放大比例
  • minimum-scale:最大缩比例
  • user-scalable:用户是都可缩放
WangXi01

WangXi01 commented on Jul 12, 2022

@WangXi01

是在meta标签里面控制,主要用于手机端,因为没有兼容的话,在电脑上面写的网页到手机里面是会超出的,viewport 就是视区窗口,也就是浏览器中显示网页的部分,我们可以设置它在手机上面展示到底多宽,以及缩放的比例
设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许

Iambecauseyouare

Iambecauseyouare commented on Feb 18, 2023

@Iambecauseyouare

width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许

lili-0923

lili-0923 commented on Feb 2, 2024

@lili-0923

设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许

pengsir120

pengsir120 commented on Sep 11, 2024

@pengsir120

width
控制视口的大小。这可以设置为特定像素数(如'width=600'),也可以设置为特殊值device-width,即 100vw,100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。

height
控制视口的大小。这可以设置为特定像素数(如 width=600),也可以设置为特殊值 device-height,即 100vh,100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。

initial-scale
控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

minimum-scale
控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

maximum-scale
控制页面允许放大的倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

user-scalable
控制是否允许页面上的放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1,与 yes 相同。将值设置为 0(即与 no 相同)将违反 Web 内容无障碍指南(WCAG)。

interactive-widget
指定交互式 UI 组件(如虚拟键盘)对页面视口的影响。有效值:resizes-visual、resizes-content 或 overlays-content。默认值:resizes-visual。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@buuug7@WangXi01

        Issue actions

          [html] 第10天 viewport常见设置都有哪些? · Issue #28 · haizlin/fe-interview