`

两个viewport的故事(第一部分)

 
阅读更多

http://weizhifeng.net/viewports.html

原文:http://www.quirksmode.org/mobile/viewports.html

在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕。

这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。

概念:设备像素和CSS像素

你需要明白的第一个概念是CSS像素,以及它和设备像素的区别。

设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率,并且其值可以(通常情况下)从screen.width/height属性中读出。

如果你给一个元素设置了width: 128px的属性,并且你的显示器是1024px宽,当你最大化你的浏览器屏幕,这个元素将会在你的显示器上重复显示8次(大概是这样;我们先忽略那些微妙的地方)。

如果用户进行缩放,那么计算方式将会发生变化。如果用户放大到200%,那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。

现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以,元素的宽度并没有从128个像素被修改为256个像素;相反是实际像素被放大了两倍。形式上,元素仍然是128个CSS像素宽,即使它占据了256个设备像素的空间。

换句话说,放大到200%使一个CSS像素变成为一个设备像素的四倍。(宽度2倍,高度2倍,总共4倍)

一些配图可以解释清楚这个概念。这儿有四个100%缩放比的元素。这儿没有什么值得看的;CSS像素与设备像素完全重叠。

csspixels_100

现在让我们缩小。CSS像素开始收缩,这意味着现在一个设备像素覆盖了多个CSS像素。

csspixels_out

如果你进行放大,相反的行为会发生。CSS像素开始变大,现在一个CSS像素覆盖了多个设备像素。

csspixels_in

这儿的要点是你只对CSS像素感兴趣。这些就是那些控制你的样式表如何被渲染的像素。

设备像素对你(译者:指的是开发者)来说基本上没用。但是对于用户不一样;用户将会放大或者缩小页面直到他能舒服的阅读为止。无论怎样,缩放比例对你不会产生影响。浏览器将会自动的使你的CSS布局被拉伸或者被压缩。

100%缩放

我是以假设缩放比例为100%来开始这个例子的。是时候需要更加严格的来定义一下这个100%了:

在缩放比例100%的情况下一个CSS像素完全等于一个设备像素。

100%缩放的概念在接下来的解释中会非常有用,但是在你的日常工作中你不用过分的担心它。在桌面环境上你将会在100%缩放比例的情况下测试你的站点,但即使用户放大或者缩小,CSS像素的魔力将会保证你的布局保持相同的比率。

屏幕尺寸

screen.width/height

  • 意义:用户屏幕的整体大小。
  • 度量单位:设备像素。
  • 浏览器错误:IE8以CSS像素对其进行度量,IE7和IE8模式下都有这个问题。

让我们看一些实用的度量。我们将会以screen.widthscreen.height做为开始。它们包括用户屏幕的整个宽度和高度。它们的尺寸是以设备像素来进行度量的,因为它们永远不会变:它们是显示器的属性,而不是浏览器的。

desktop_screen

Fun! 但是这些信息跟对我们有什么用呢?

基本上没用。用户的显示器尺寸对于我们来说不重要-好吧,除非你想度量它来丰富你的web统计数据库。

窗口尺寸

window.innerWidth/Height

  • 意义:浏览器窗口的整体大小,包括滚动条。
  • 度量单位:CSS像素。
  • 浏览器错误:IE7不支持。Opera以设备像素进行度量。

相反,你想知道的是浏览器窗口的内部尺寸。它告诉了你用户到底有多少空间可以用来做CSS布局。你可以通过window.innerWidthwindow.innerHeight来获取这些尺寸。

desktop_inner

很显然,窗口的内部宽度是以CSS像素进行度量的。你需要知道你的布局空间中有多少可以挤进浏览器窗口,当用户放大的时候这个数值会减少。所以如果用户进行放大操作,那么在窗口中你能获取的空间将会变少,window.innerWidth/Height的值也变小了。 (这儿的例外是Opera,当用户放大的时候window.innerWidth/Height并没有减少:它们是以设备像素进行度量的。这个问题在桌面上是比较烦人的,但是就像我们将要看到的,这在移动设备上却是非常严重的。)

desktop_inner_zoomed

注意度量的宽度和高度是包括滚动条的。它们也被视为内部窗口的一部分。(这大部分是因为历史原因造成的。)

滚动距离

window.pageX/YOffset

  • 意义:页面滚动的距离。
  • 度量单位:CSS像素。
  • 浏览器错误:无。

window.pageXOffsetwindow.pageYOffset,包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离。

desktop_page

这些属性也是以CSS像素进行度量的。你想知道的是文档已经被滚动了多长距离,不管它是放大还是缩小的状态。

理论上,如果用户向上滚动,然后放大,window.pageX/YOffset将会发生变化。但是,浏览器为了想保持web页面的连贯,会在用户缩放的时候保持相同的元素位于可见页面的顶部。这个机制并不能一直很完美的执行,但是它意味着在实际情况下window.pageX/YOffset并没有真正的更改:被滚动出窗口的CSS像素的数量仍然(大概)是相同的。

desktop_page_zoomed

概念:viewport

在我们继续介绍更多的JavaScript属性之前,我们必须介绍另一个概念:viewport。

viewport的功能是用来约束你网站中最顶级包含块元素(containing block)<html>的。

这听起来有一点模糊,所以看一个实际的例子。假设你有一个流式布局,并且你众多边栏中的一个具有width: 10%属性。现在这个边栏会随着浏览器窗口大小的调整而恰好的放大和收缩。但是这到底是如何工作的呢?

从技术上来说,发生的事情是边栏获取了它父元素宽度的10%。比方说是<body>元素(并且你还没有给它设置过宽度)。所以问题就变成了<body>的宽度是哪个?

普通情况下,所有块级元素使用它们父元素宽度的100%(这儿有一些例外,但是让我们现在先忽略它)。所以<body>元素和它的父元素<html>一样宽。

那么<html>元素的宽度是多少?它的宽度和浏览器窗口宽度一样。这就是为什么你的那个拥有width: 10%属性的侧边栏会占据整个浏览器窗口的10%。所有web开发者都很直观的知道并且在使用它。

你可能不知道的是这个行为在理论上是如何工作的。理论上,<html>元素的宽度是被viewport的宽度所限制的。<html>元素使用viewport宽度的100%。

viewport,接着,实际上等于浏览器窗口:它就是那么定义的。viewport不是一个HTML结构,所以你不能用CSS来改变它。它在桌面环境下只是拥有浏览器窗口的宽度和高度。在移动环境下它会有一些复杂。

后果 Consequences

这个状况会有产生一些异样的后果。你可以在这个站点看到这些后果中的一个。滚动到顶部,然后放大两次或者三次,之后这个站点的内容就从浏览器窗口溢出了。

现在滚动到右边,然后你将会看见站点顶部的蓝色边栏不再覆盖一整行了。

desktop_htmlbehaviour

这个行为是由于viewport的定义方式而产生的一个后果。我之前给顶部的蓝色边栏设置了width: 100%。什么的100%?<html>元素的100%,它的宽度和viewport是一样的,viewport的宽度是和浏览器窗口一样的。

问题是:在100%缩放的情况下这个工作的很好,现在我们进行了放大操作,viewport变得比我的站点的总体宽度要小。这对于viewport它本身来说没什么影响,内容现在从<html>元素中溢出了,但是那个元素拥有overflow: visible,这意味着溢出的内容在任何情况下都将会被显示出来。

但是蓝色边栏并没有溢出。我之前给它设置了width: 100%,并且浏览器把viewport的宽度赋给了它。它们根本就不在乎现在宽度实在是太窄了。

desktop_100percent

文档宽度?

我真正需要知道的是页面中全部内容的宽度是多少,包括那些「伸出」的部分。据我所知得到这个值是不可能的(好吧,除非你去计算页面上所有元素的宽度和边距,但是委婉的说,这是容易出错的)。

我开始相信我们需要一个我称其为「文档宽度」(document width,很显然用CSS像素进行度量)的JavaScript属性对。

desktop_documentwidth

并且如果我们真的如此时髦,为什么不把这个值引入到CSS中?我将会给我的蓝色边栏设置width: 100%,此值基于文档宽度,而不是<html>元素的宽度。(但是这个很复杂,并且如果不能实现我也不会感到惊讶。)

浏览器厂商们,你们怎么认为的?

度量viewport

document.documentElement.clientWidth/Height

  • 意义:Viewport尺寸。
  • 度量单位:CSS像素。
  • 浏览器错误:无。

你可能想知道viewport的尺寸。它们可以通过document.documentElement.clientWidth-Height得到。

desktop_client

如果你了解DOM,你应该知道document.documentElement实际上指的是<html>元素:即任何HTML文档的根元素。可以说,viewport要比它更高一层;它是包含<html>元素的元素。如果你给<html>元素设置width属性,那么这将会产生影响。(我不推荐这么做,但是那是可行的。)

在那种情况下document.documentElement.clientWidth-Height给出的仍然是viewport的尺寸,而不是<html>元素的。(这是一个特殊的规则,只对这个元素的这个属性对产生作用。在任何其他的情况下,使用的是元素的实际宽度。)

desktop_client_smallpage

所以document.documentElement.clientWidth-Height一直代表的是viewport的尺寸,不管<html>元素的尺寸是多少。

两个属性对

但是难道viewport宽度的尺寸也可以通过window.innerWidth/Height来提供吗?怎么说呢,模棱两可。

两个属性对之间存在着正式区别:document.documentElement.clientWidth-Height并不包含滚动条,但是window.innerWidth/Height包含。这像是鸡蛋里挑骨头。

事实上两个属性对的存在是浏览器战争的产物。当时Netscape只支持window.innerWidth/Height,IE只支持document.documentElement.clientWidthHeight。从那时起所有其他浏览器开始支持clientWidth/Height,但是IE没有支持window.innerWidth/Height

在桌面环境上拥有两个属性对是有一些累赘的 - 但是就像我们将要看到的,在移动端这将会得到祝福。

度量\<html>元素

document.documentElement.offsetWidth/Height

  • 意义:元素(也就是页面)的尺寸。
  • 度量单位:CSS像素。
  • 浏览器错误:IE度量的是viewport,而不是元素。

所以clientWidth/Height在所有情况下都提供viewport的尺寸。但是我们去哪里获取<html>元素本身的尺寸呢?它们存储在document.documentElement.offsetWidth-Height之中。

desktop_offset

这些属性可以使你以块级元素的形式访问<html>元素;如果你设置width,那么offsetWidth将会表示它。

desktop_offset_smallpage

事件中的坐标

pageX/Y, clientX/Y, screenX/Y

  • 意义:见正文。
  • 度量单位:见正文。
  • 浏览器错误:IE不支持pageX/Y。IE和Opera以CSS像素为单位计算screenX/Y。

然后是事件中的坐标。当一个鼠标事件发生时,有不少于五种属性对可以给你提供关于事件位置的信息。对于我们当前的讨论来说它们当中的三种是重要的:

  • pageX/Y提供了相对于<html>元素的以CSS像素度量的坐标。

desktop_pageXY

  • clientX/Y提供了相对于viewport的以CSS像素度量的坐标。

desktop_clientXY

  • screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标。

desktop_screenXY

90%的时间你将会使用pageX/Y;通常情况下你想知道的是相对于文档的事件坐标。其他的10%时间你将会使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标。

媒体查询

媒体查询

  • 意义:见正文。
  • 度量单位:见正文。
  • 浏览器错误:IE不支持它们。
    • 如果 device-width/height是以CSS像素进行度量的,那么Firefox将会使用screen.width/height的值。
    • 如果width/height是以设备像素进行度量的,那么Safari和Chrome将会使用documentElement.clientWidth/Height的值。

最后,说说关于媒体查询的事。原理很简单:你可以声明「只在页面宽度大于,等于或者小于一个特定尺寸的时候才会被执行」的特殊的CSS规则。比如:

div.sidebar {
    width: 300px;
}

@media all and (max-width: 400px) {
    // styles assigned when width is smaller than 400px;
    div.sidebar {
        width: 100px;
    }

}

当前sidebar是300px宽,除了当宽度小于400px的时候,在那种情况下sidebar变得100px宽。

问题很显然:我们这儿度量的是哪个宽度?

这儿有两个对应的媒体查询:width/heightdevice-width/device-height

  1. width/height使用和documentElement .clientWidth/Height(换句话说就是viewport宽高)一样的值。它是工作在CSS像素下的。

  2. device-width/device-height使用和screen.width/height(换句话说就是屏幕的宽高)一样的值。它工作在设备像素下面。

desktop_mediaqueries

你应该使用哪个?这还用想?当然是width。Web开发者对设备宽度不感兴趣;这个是浏览器窗口的宽度。

所以在桌面环境下去使用width而去忘记device-width吧。我们即将看到这个情况在移动端会更加麻烦。

总结

本文总结了我们对桌面浏览器行为的探寻。这个系列的第二部分把这些概念指向了移动端,并显示的指出了与桌面环境上的一些重要区别。

(完)

 

分享到:
评论

相关推荐

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,不平衡电网下的svg无功补偿,级联H桥svg无功补偿statcom,采用三层控制策略。 (1)第一层采用电压电流双闭环pi控制,电压电流正负序分离,电压外环通过产生基波正序有功电流三相所有H桥模块直流侧平均电压恒定,电流内环采用前馈解耦控制; (2)第二层相间电压均衡控制,注入零序电压,控制通过注入零序电压维持相间电压平衡; (3)第三层相内电压均衡控制,使其所有子模块吸收的有功功率与其损耗补,从而保证所有H桥子模块直流侧电压值等于给定值。 有参考资料。 639,核心关键词: 1. 不平衡电网下的SVG无功补偿 2. 级联H桥SVG无功补偿STATCOM 3. 三层控制策略 4. 电压电流双闭环PI控制 5. 电压电流正负序分离 6. 直流侧平均电压恒定 7. 前馈解耦控制 8. 相间电压均衡控制 9. 零序电压注入 10. 相内电压均衡控制 以上十个关键词用分号分隔的格式为:不

    GTX 1080 PCB图纸

    GTX 1080 PCB图纸,内含图纸查看软件

    深度优化与应用:提升DeepSeek润色指令的有效性和灵活性指南

    内容概要:本文档详细介绍了利用 DeepSeek 进行文本润色和问答交互时提高效果的方法和技巧,涵盖了从明确需求、提供适当上下文到尝试开放式问题以及多轮对话的十个要点。每一部分内容都提供了具体的示范案例,如指定回答格式、分步骤提问等具体实例,旨在指导用户更好地理解和运用 DeepSeek 提升工作效率和交流质量。同时文中还强调了根据不同应用场景调整提示词语气和风格的重要性和方法。 适用人群:适用于希望通过优化提问技巧以获得高质量反馈的企业员工、科研人员以及一般公众。 使用场景及目标:本文针对所有期望提高 DeepSeek 使用效率的人群,帮助他们在日常工作中快速获取精准的答案或信息,特别是在撰写报告、研究材料准备和技术咨询等方面。此外还鼓励用户通过不断尝试不同形式的问题表述来进行有效沟通。 其他说明:该文档不仅关注实际操作指引,同样重视用户思维模式转变——由简单索取答案向引导 AI 辅助创造性解决问题的方向发展。

    基于FPGA与W5500实现的TCP网络通信测试平台开发-Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivad

    基于FPGA与W5500实现的TCP网络通信测试平台开发——Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivado 2019软件的扩展开发,基于FPGA和W5500的TCP网络通信 测试平台 zynq扩展口开发 软件平台 vivado2019.2,纯Verilog可移植 测试环境 压力测试 cmd命令下ping电脑ip,同时采用上位机进行10ms发包回环测试,不丢包(内部数据回环,需要时间处理) 目前实现单socket功能,多路可支持 ,基于FPGA; W5500; TCP网络通信; Zynq扩展口开发; 纯Verilog可移植; 测试平台; 压力测试; 10ms发包回环测试; 单socket功能; 多路支持。,基于FPGA与W5500的Zynq扩展口TCP通信测试:可移植Verilog实现的高效网络通信

    Labview液压比例阀伺服阀试验台多功能程序:PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储,报表生成与打印一体化解决方案 ,Labview液压比例阀

    Labview液压比例阀伺服阀试验台多功能程序:PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储,报表生成与打印一体化解决方案。,Labview液压比例阀伺服阀试验台多功能程序:PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警管理及实验自动化,labview液压比例阀伺服阀试验台程序:功能包括,同PLC通讯程序,液压动画,手动控制及调试,传感器标定,报警设置及报警记录,自动实验,数据处理曲线处理,数据库存储及查询,报表自动生成及打印,扫码枪扫码及信号录入等~ ,核心关键词:PLC通讯; 液压动画; 手动控制及调试; 传感器标定; 报警设置及记录; 自动实验; 数据处理及曲线处理; 数据库存储及查询; 报表生成及打印; 扫码枪扫码。,Labview驱动的智能液压阀测试系统:多功能控制与数据处理

    华为、腾讯、万科员工职业发展体系建设与实践.pptx

    华为、腾讯、万科员工职业发展体系建设与实践.pptx

    基于遗传算法的柔性车间调度优化 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    电网不对称故障下VSG峰值电流限制的柔性控制策略:实现电流平衡与功率容量的优化利用,电网不对称故障下VSG峰值电流限制的柔性控制策略:兼顾平衡电流与功率控制切换的动态管理,电网不对称故障下VSG峰值电

    电网不对称故障下VSG峰值电流限制的柔性控制策略:实现电流平衡与功率容量的优化利用,电网不对称故障下VSG峰值电流限制的柔性控制策略:兼顾平衡电流与功率控制切换的动态管理,电网不对称故障下VSG峰值电流限制的柔性不平衡控制(文章完全复现)。 提出一种在不平衡运行条件下具有峰值电流限制的可变不平衡电流控制方法,可灵活地满足不同操作需求,包括电流平衡、有功或无功恒定运行(即电流控制、有功控制或无功控制之间的相互切),注入电流保持在安全值内,以更好的利用VSG功率容量。 关键词:VSG、平衡电流控制、有功功率控制、无功功率控制。 ,VSG; 峰值电流限制; 柔性不平衡控制; 电流平衡控制; 有功功率控制; 无功功率控制。,VSG柔性控制:在电网不对称故障下的峰值电流限制与平衡管理

    libpinyin-tools-0.9.93-4.el7.x64-86.rpm.tar.gz

    1、文件内容:libpinyin-tools-0.9.93-4.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/libpinyin-tools-0.9.93-4.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    机器学习(预测模型):动漫《龙珠》相关的数据集

    数据集是一个以经典动漫《龙珠》为主题的多维度数据集,广泛应用于数据分析、机器学习和图像识别等领域。该数据集由多个来源整合而成,涵盖了角色信息、战斗力、剧情片段、台词以及角色图像等多个方面。数据集的核心内容包括: 角色信息:包含《龙珠》系列中的主要角色及其属性,如名称、种族、所属系列(如《龙珠》《龙珠Z》《龙珠超》等)、战斗力等级等。 图像数据:提供角色的图像资源,可用于图像分类和角色识别任务。这些图像来自动画剧集、漫画和相关衍生作品。 剧情与台词:部分数据集还包含角色在不同故事中的台词和剧情片段,可用于文本分析和自然语言处理任务。 战斗数据:记录角色在不同剧情中的战斗力变化和战斗历史,为研究角色成长和剧情发展提供支持。 数据集特点 多样性:数据集整合了角色、图像、文本等多种类型的数据,适用于多种研究场景。 深度:不仅包含角色的基本信息,还涵盖了角色的成长历程、技能描述和与其他角色的互动关系。 实用性:支持多种编程语言(如Python、R)的数据处理和分析,提供了详细的文档和示例代码。

    基于protues仿真的多功公交站播报系统设计(仿真图、源代码)

    基于protues仿真的多功公交站播报系统设计(仿真图、源代码) 该设计为基于protues仿真的多功公交站播报系统,实现温度显示、时间显示、和系统公交站播报功能; 具体功能如下: 1、系统使用51单片机为核心设计; 2、时钟芯片进行时间和日期显示; 3、温度传感器进行温度读取; 4、LCD12864液晶屏进行相关显示; 5、按键设置调节时间; 6、按键设置报站; 7、仿真图、源代码; 操作说明: 1、下行控制报站:首先按下(下行设置按键),(下行指示灯)亮,然后按下(手动播报)按键控制播报下一站; 2、上行控制报站:首先按上(上行设置按键),(上行指示灯)亮,然后按下(手动播报)按键控制播报下一站; 3、按下关闭播报按键,则关闭播报功能和清除显示

    基于微信小程序的琴房管理系统的设计与实现.zip

    采用Java后台技术和MySQL数据库,在前台界面为提升用户体验,使用Jquery、Ajax、CSS等技术进行布局。 系统包括两类用户:学生、管理员。 学生用户 学生用户只要实现了前台信息的查看,打开首页,查看网站介绍、琴房信息、在线留言、轮播图信息公告等,通过点击首页的菜单跳转到对应的功能页面菜单,包括网站首页、琴房信息、注册登录、个人中心、后台登录。 学生用户通过账户账号登录,登录后具有所有的操作权限,如果没有登录,不能在线预约。学生用户退出系统将注销个人的登录信息。 管理员通过后台的登录页面,选择管理员权限后进行登录,管理员的权限包括轮播公告管理、老师学生信息管理和信息审核管理,管理员管理后点击退出,注销登录信息。 管理员用户具有在线交流的管理,琴房信息管理、琴房预约管理。 在线交流是对前台用户留言内容进行管理,删除留言信息,查看留言信息。

    界面GUI设计MATLAB教室人数统计.zip

    MATLAB可以用于开发人脸识别考勤系统。下面是一个简单的示例流程: 1. 数据采集:首先收集员工的人脸图像作为训练数据集。可以要求员工提供多张照片以获得更好的训练效果。 2. 图像预处理:使用MATLAB的图像处理工具对采集到的人脸图像进行预处理,例如灰度化、裁剪、缩放等操作。 3. 特征提取:利用MATLAB的人脸识别工具包,如Face Recognition Toolbox,对处理后的图像提取人脸特征,常用的方法包括主成分分析(PCA)和线性判别分析(LDA)等。 4. 训练模型:使用已提取的人脸特征数据集训练人脸识别模型,可以选择支持向量机(SVM)、卷积神经网络(CNN)等算法。 5. 考勤系统:在员工打卡时,将摄像头捕获的人脸图像输入到训练好的模型中进行识别,匹配员工信息并记录考勤数据。 6. 结果反馈:根据识别结果,可以自动生成考勤报表或者实时显示员工打卡情况。 以上只是一个简单的步骤,实际开发过程中需根据具体需求和系统规模进行定制和优化。MATLAB提供了丰富的图像处理和机器学习工具,是开发人脸识别考勤系统的一个很好选择。

    hjbvbnvhjhjg

    hjbvbnvhjhjg

    HCIP、软考相关学习PPT

    HCIP、软考相关学习PPT提供下载

    绿豆BOX UI8版:反编译版六个全新UI+最新后台直播管理源码

    绿豆BOX UI8版:反编译版六个全新UI+最新后台直播管理源码 最新绿豆BOX反编译版六个UI全新绿豆盒子UI8版本 最新后台支持直播管理 作为UI6的升级版,UI8不仅修复了前一版本中存在的一些BUG,还提供了6套不同的UI界面供用户选择,该版本有以下特色功能: 在线管理TVBOX解析 在线自定义TVBOX 首页布局批量添加会员信息 并支持导出批量生成卡密 并支持导出直播列表管理功能

    vue3的一些语法以及知识点

    vue3的一些语法以及知识点

    西门子大型Fanuc机器人汽车焊装自动生产线程序经典解析:PLC博图编程与MES系统通讯实战指南,西门子PLC博图汽车焊装自动生产线FANUC机器人程序经典结构解析与MES系统通讯,西门子1500 大

    西门子大型Fanuc机器人汽车焊装自动生产线程序经典解析:PLC博图编程与MES系统通讯实战指南,西门子PLC博图汽车焊装自动生产线FANUC机器人程序经典结构解析与MES系统通讯,西门子1500 大型程序fanuc 机器人汽车焊装自动生产线程序 MES 系统通讯 大型程序fanuc机器人汽车焊装自动生产线程序程序经典结构清晰,SCL算法堆栈,梯形图和 SCL混编使用博图 V14以上版本打开 包括: 1、 PLC 博图程序 2 触摸屏程序 ,西门子1500; 大型程序; fanuc机器人; 汽车焊装自动生产线; MES系统通讯; SCL算法; 梯形图; SCL混编; 博图V14以上版本。,西门子博图大型程序:汽车焊装自动生产线MES系统通讯与机器人控制

    DeepSeek:从入门到精通

    DeepSeek:从入门到精通

    计及信息间隙决策与多能转换的综合能源系统优化调度模型:实现碳经济最大化与源荷不确定性考量,基于信息间隙决策与多能转换的综合能源系统优化调度模型:源荷不确定性下的高效碳经济调度策略,计及信息间隙决策及多

    计及信息间隙决策与多能转换的综合能源系统优化调度模型:实现碳经济最大化与源荷不确定性考量,基于信息间隙决策与多能转换的综合能源系统优化调度模型:源荷不确定性下的高效碳经济调度策略,计及信息间隙决策及多能转的综合能源系统优化调度 本代码构建了含风电、光伏、光热发电系统、燃气轮机、燃气锅炉、电锅炉、储气、储电、储碳、碳捕集装置的综合能源系统优化调度模型,并考虑P2G装置与碳捕集装置联合运行,从而实现碳经济的最大化,最重要的是本文引入了信息间隙决策理论考虑了源荷的不确定性(本代码的重点)与店铺的47代码形成鲜明的对比,注意擦亮眼睛,认准原创,该代码非常适合修改创新,,提供相关的模型资料 ,计及信息间隙决策; 综合能源系统; 优化调度; 多能转换; 碳经济最大化; 风电; 光伏; 燃气轮机; 储气; 储电; 储碳; 碳捕集装置; P2G装置联合运行; 模型资料,综合能源系统优化调度模型:基于信息间隙决策和多能转换的原创方案

Global site tag (gtag.js) - Google Analytics