第10天 viewport常见设置都有哪些?
Activity
hbl045 commentedon May 5, 2019
用于移动端显示
tiyunchen commentedon Jun 1, 2019
AricZhu commentedon Jun 24, 2019
Konata9 commentedon Jul 25, 2019
在移动端做开发时,必须要搞清楚
viewport
这一设置。viewport
就是视区窗口,也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域,但在移动端上viewport
会超出设备的显示区域(即会有横向滚动条出现)。设备默认的
viewport
在 980 - 1024 之间。为了让移动端可以很好地显示页面,因此需要对
viewport
进行设置。相关的设置值如下:viewport
是在meta
标签内进行控制。相关的衍生知识: dpr 与 CSS 像素。CSS 像素的
1px
在 PC 端上与设备的物理像素基本一致,而到手机端就会有两个物理像素对应一个 CSS 像素的情况出现(如 iPhone 的视网膜屏)。所以 iPhone 上的 dpr = 2 即 2 个物理像素 / 一个 CSS 像素(独立像素)
参考文章:移动前端开发之 viewport 的深入理解
censek commentedon Oct 11, 2019
viewport
手机浏览器把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
kruzabc commentedon Dec 26, 2019
上面已经说了很多了,我补充下:
window.outerWidth 是屏幕宽度,这是固定不变的 。
window.innerWidth 是视口宽度
document.documentElement.clientWidth 也就是标签的宽度。
后面两个值都要根据前面的进行换算。
如何换算?
首先我们要定义个变量
scale``? 根据标签里的
initial-scale=1, maximum-scale=1 minimum-scale=1`算出来的, 如果不指定这三个默认是1, 我们定义scale表示缩放比,scale默认等于1meta标签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。几个属性的计算规则:
如果我们加上了开头那句meta标签,我们的网页就不能缩放,放大比例为1
也就是下面三个值相等:
window.outerWidth
==window.innerWidth
==document.documentElement.clientWidth
最后:屏幕尺寸=视口尺寸=html尺寸(html标签)
larry0442 commentedon Apr 7, 2020
还有其他漏了的吗
blueRoach commentedon May 26, 2020
常规移动端设置
giggleCYT commentedon Jun 3, 2020
smile-2008 commentedon Sep 4, 2020
buuug7 commentedon Jan 9, 2021
react官方推荐的写法,其他的乱七八糟的请忘记把
xiezhenghua123 commentedon Apr 11, 2021
移动端开发必须要知道viewport
lxt-ing commentedon Apr 16, 2021
viewport 属性 :width:宽,height:高,initial-scale:初始缩放比例,user-scalable:允许用户手动缩放,maximum-scale:最大缩放比例,minimum-scale:最小缩放比例。
amikly commentedon Oct 28, 2021
概念
viewpoint
是视区窗口,就是浏览器中显示网页的部分。PC端上基本等于设备显示区域,但在移动端上
viewpoint
会超过设备的显示区域(会有横向滚动条的的出现)设备默认的
viewpoint
在 980 - 1024 之间属性设置
yxllovewq commentedon Mar 7, 2022
总结:
content可选值:
width: 布局视口宽度
height:布局视口高度
initial-scale:初始缩放比
maximum-scale:最大放大比例
minimum-scale:最大缩小比例
user-scalable:用户是否可缩放
syfine commentedon Apr 12, 2022
WangXi01 commentedon Jul 12, 2022
是在meta标签里面控制,主要用于手机端,因为没有兼容的话,在电脑上面写的网页到手机里面是会超出的,viewport 就是视区窗口,也就是浏览器中显示网页的部分,我们可以设置它在手机上面展示到底多宽,以及缩放的比例
设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许
Iambecauseyouare commentedon Feb 18, 2023
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许
lili-0923 commentedon Feb 2, 2024
设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许
pengsir120 commentedon Sep 11, 2024
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。