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

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

相关文章

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringMVC获取请求参数的方法

《SpringMVC获取请求参数的方法》:本文主要介绍SpringMVC获取请求参数的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 目录1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、@RequestParam4、@

Python获取C++中返回的char*字段的两种思路

《Python获取C++中返回的char*字段的两种思路》有时候需要获取C++函数中返回来的不定长的char*字符串,本文小编为大家找到了两种解决问题的思路,感兴趣的小伙伴可以跟随小编一起学习一下... 有时候需要获取C++函数中返回来的不定长的char*字符串,目前我找到两种解决问题的思路,具体实现如下:

golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法

《golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法》:本文主要介绍golang获取当前时间、时间戳和时间字符串及它们之间的相互转换,本文通过实例代码给大家介绍的非常详细,感兴趣... 目录1、获取当前时间2、获取当前时间戳3、获取当前时间的字符串格式4、它们之间的相互转化上篇文章给大家介

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专