[大屏适配]根据屏幕尺寸获取伸缩比例

2024-06-20 13:44
文章标签 适配 大屏 伸缩 屏幕 尺寸 获取 比例

本文主要是介绍[大屏适配]根据屏幕尺寸获取伸缩比例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

[大屏适配]根据屏幕尺寸获取伸缩比例

用于检查浏览器窗口的宽度，并根据宽度调整页面的缩放级别，以适应不同的屏幕分辨率。具体来说，代码分为以下几个部分：

  1. getLayoutWidth() 函数用于获取当前浏览器窗口的宽度。该函数首先获取屏幕的宽度和高度，然后根据宽高比计算出适合的宽度，并返回该宽度。

  2. getZoomLevel() 函数用于根据当前浏览器窗口的宽度和起始缩放级别、结束缩放级别计算出当前的缩放级别。该函数首先获取起始宽度和结束宽度以及对应的缩放级别，然后根据线性插值的方法计算出当前的缩放级别，并返回该级别。

  3. notSupportZoom 变量用于判断当前浏览器是否支持缩放。该变量定义了一个自执行函数，该函数通过判断浏览器的 UserAgent、ActiveXObject、CSS、MouseEvent 等属性来判断当前浏览器是否支持缩放。

  4. checkZoom() 函数用于检查当前浏览器窗口的宽度，并根据宽度调整页面的缩放级别。该函数首先调用 getLayoutWidth() 函数获取当前浏览器窗口的宽度，然后根据宽度计算出当前的缩放级别，并将缩放级别应用到页面上。如果当前浏览器不支持缩放，则将缩放级别设置为 1。如果当前浏览器窗口的宽度没有发生变化，则不进行任何操作。最后，该函数使用定时器定时检查浏览器窗口的宽度，并根据宽度调整页面的缩放级别。

  5. 在页面加载完成后，代码通过监听 DOMContentLoaded 事件来调用 checkZoom() 函数，以便在页面加载完成后立即检查浏览器窗口的宽度，并根据宽度调整页面的缩放级别。

总的来说，这段代码主要用于实现页面的自适应缩放功能，以便在不同的屏幕分辨率下都能够正常显示页面内容。

// 获取布局宽度
function getLayoutWidth() {const { width, height } = window.screenif (width > height) {const aspectRatio = width / heightconst regularAspectRatio = 16 / 9if (aspectRatio <= regularAspectRatio) {return width // 返回宽度} else {return height * regularAspectRatio // 返回高度乘以标准宽高比}} else {return width // 返回宽度}
}// 获取缩放级别
function getZoomLevel(width, start, end) {const { width: startWidth, zoom: startZoom } = startconst { width: endWidth, zoom: endZoom } = endreturn startZoom + ((endZoom - startZoom) * (width - startWidth)) / (endWidth - startWidth)
}// 判断是否支持缩放
const notSupportZoom = (function () {let ua = navigator.userAgentreturn (ua.indexOf('Firefox') > -1 ||!!window.ActiveXObject ||'ActiveXObject' in window ||typeof CSS === 'undefined' ||!CSS.supports('zoom', '1') ||!Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'pageX'))
})()let prevWidth
let timer = null
let hasHackProperties = false// 检查缩放
function checkZoom() {const currentWidth = getLayoutWidth()if (currentWidth === prevWidth) returnprevWidth = currentWidthif (currentWidth <= 1920 || notSupportZoom) {window.PAGEZOOM = 1document.documentElement.style.zoom = ''document.documentElement.style.setProperty('--zoom-level', '1')document.body.classList.remove('page-zoom')} else {const zoom =currentWidth <= 2560? getZoomLevel(currentWidth, { width: 1920, zoom: 1 }, { width: 2560, zoom: 1.25 }): currentWidth > 2560 && currentWidth <= 3840? getZoomLevel(currentWidth, { width: 2560, zoom: 1.25 }, { width: 3840, zoom: 1.75 }): 1.75window.PAGEZOOM = zoomdocument.documentElement.style.zoom = zoomdocument.documentElement.style.setProperty('--zoom-level', zoom)document.body.classList.add('page-zoom')if (!hasHackProperties) {// 重写属性Object.defineProperty(document.documentElement, 'clientHeight', {get: function () {return this.offsetHeight}})Object.defineProperty(document.documentElement, 'clientWidth', {get: function () {return this.offsetWidth}})try {const originalElementFromPoint = document.elementFromPointconst originalElementsFromPoint = document.elementsFromPointdocument.elementFromPoint = function (x, y) {return originalElementFromPoint.call(this, x * window.PAGEZOOM, y * window.PAGEZOOM)}document.elementsFromPoint = function (x, y) {return originalElementsFromPoint.call(this, x * window.PAGEZOOM, y * window.PAGEZOOM)}function rewriteNativeGetter(targetObj, props, nativeObj) {var getters = props.map(function (prop) {return Object.getOwnPropertyDescriptor(nativeObj || targetObj, prop).get})var setters = props.map(function (prop) {return Object.getOwnPropertyDescriptor(nativeObj || targetObj, prop).set})Object.defineProperties(targetObj,props.reduce(function (prev, next, i) {prev[next] = {get: function () {return getters[i].call(this) / window.PAGEZOOM}}if (nativeObj && setters[i]) {prev[next].set = function (value) {return setters[i].call(this, value * window.PAGEZOOM)}}return prev}, {}))}// 重写鼠标事件rewriteNativeGetter(MouseEvent.prototype, ['pageX', 'pageY', 'clientX', 'clientY'])// 重写元素属性rewriteNativeGetter(document.documentElement,['scrollTop', 'scrollLeft', 'scrollHeight', 'scrollWidth'],Element.prototype)// 重写窗口属性rewriteNativeGetter(window, ['scrollX', 'scrollY', 'pageXOffset', 'pageYOffset', 'innerHeight', 'innerWidth'])} catch (e) {console.error(e)}hasHackProperties = true}}if (!notSupportZoom && !timer) {timer = setInterval(checkZoom, 1000) // 定时检查缩放}
}window.addEventListener('DOMContentLoaded', checkZoom) // 监听DOM加载事件

这篇关于[大屏适配]根据屏幕尺寸获取伸缩比例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1078296。

相关文章

笔记本电脑屏幕模糊？6招恢复屏幕清晰！

笔记本电脑屏幕模糊？6招恢复屏幕清晰！

在数字化时代的浪潮中，笔记本电脑已成为我们生活、学习和工作中不可或缺的一部分。然而，当那曾经清晰明亮的屏幕逐渐变得模糊不清时，无疑给我们的使用体验蒙上了一层阴影。屏幕模糊不仅影响视觉舒适度，更可能对我们的工作效率和眼睛健康构成威胁。 遇到笔记本电脑屏幕模糊的情况时我们应该如何解决？本文将与大家分享6个简单易懂的解决方法。 方法一：调整Windows分辨率 电脑屏幕模糊显示不清晰怎
阅读更多...
【青龙面板辅助】JD商品自动给好评获取京豆脚本

【青龙面板辅助】JD商品自动给好评获取京豆脚本

1.打开链接 开下面的链接进入待评价商品页面 https://club.jd.com/myJdcomments/myJdcomments.action?sort=0 2.登陆后执行脚本 登陆后，按F12键，选择console，复制粘贴以下代码，先运行脚本1，再运行脚本2 脚本1代码 可以自行修改评价内容。 var content = '材质很好，质量也不错，到货也很快物流满分，包装快递满
阅读更多...
iOS 7适配上存在的各种问题

iOS 7适配上存在的各种问题

谈谈项目中遇到的各种iOS7适配问题 由于我的项目要适配到iOS7.1， 而现在已经是9时代了，在实际工作中我也是遇到了各种奇葩的坑，所以我想尽快把遇到的iOS7适配问题和解决方案分享出来，以后这些东西可能就用处不大了。   1.字体问题 iOS7中的字体适配恐怕是最麻烦的坑了，原因是iOS7以上的许多字体在7都是不存在的，甚至包括一些system-字体。比如system-
阅读更多...
Spring 内部类获取不到@Value配置值问题排查（附Spring代理方式）

Spring 内部类获取不到@Value配置值问题排查（附Spring代理方式）

目录 一、实例问题 1、现象 2、原因 3、解决 二、Spring的代理模式 1、静态代理（Static Proxy） 1）原理 2）优缺点 3）代码实现 2、JDK动态代理（JDK Dynamic Proxy） 1）原理 2）优缺点 3）代码实现 3、cglib 代理（Code Generation Library Proxy） 1）原理 2）优缺点 3）代码实
阅读更多...
获取Windows系统版本号（转）

获取Windows系统版本号（转）

https://blog.csdn.net/sunflover454/article/details/51525179
阅读更多...
ApplicationContext 获取的三种方法

ApplicationContext 获取的三种方法

spring为ApplicationContext提供的3种实现分别 为：ClassPathXmlApplicationContext，FileSystemXmlApplicationContext和 XmlWebApplicationContext，其中XmlWebApplicationContext是专为Web工程定制的。使用举例如下：    1. FileSystemXmlApplicati
阅读更多...
C语言封装获取本机IP地址的程序

C语言封装获取本机IP地址的程序

文章目录 0.概要1. 设计2. 完整的代码`ip_address.h``ip_address.c``main.c`编译命令执行结果 0.概要 本文介绍用C语言编写一个函数来获取本机的IP地址。 1. 设计 将获取IP地址的逻辑封装到一个独立的函数中，并定义一个结构体来存储IP地址和接口名称。 将获取IP地址的逻辑封装到一个函数中，该函数遍历本机的所有网络接口并获取其IP
阅读更多...
WinCE的C#程序中获取当前应用程序的路径

WinCE的C#程序中获取当前应用程序的路径

WinCE中获取当前路径的两种方法： string appPath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().GetName().CodeBase); string appPath = System.IO.Path.GetDirectoryName(System.R
阅读更多...
利用AT命令获取所在位置的小区号LAC和基站号ID，基站ID转换成经纬度

利用AT命令获取所在位置的小区号LAC和基站号ID，基站ID转换成经纬度

最近在做一个基站ID转换成经纬度的功能。     1.先发AT指令：AT+CREG=2     2.再发AT指令：AT+CREG？     获得返回值：     +CREG:     2,1,"A530","0161F10F",6 A530为LAC，0161F10F为基站ID 然后将获取的LAC，和基站ID，通
阅读更多...
C#界面动态布局 界面控件随着界面大小尺寸变化而变化

C#界面动态布局 界面控件随着界面大小尺寸变化而变化

要想写一个漂亮的界面，光靠利用Anchor和Dock属性是远远不够的，我们需要用到相对布局，就是不管窗口大小怎么变化，控件相对父控件的相对位置保持不变。可惜c#里没有提供按照百分比布局。所以只能自己再resize（）事件里调整控件位置。 首先在窗体的构造函数里保存父窗体的长宽，以及每个控件的X,Y坐标的相对位置：  int count = this.Controls.Count * 2 + 2;
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2