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

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 Environment 获取的路径问题

1. 以获取 /System 路径为例 /*** Return root of the "system" partition holding the core Android OS.* Always present and mounted read-only.*/public static @NonNull File getRootDirectory() {return DIR_ANDR

JS和jQuery获取节点的兄弟,父级,子级元素

原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素。 <div id="test"><div></div><div></div

vcpkg子包路径批量获取

获取vcpkg 子包的路径,并拼接为set(CMAKE_PREFIX_PATH “拼接路径” ) import osdef find_directories_with_subdirs(root_dir):# 构建根目录下的 "packages" 文件夹路径root_packages_dir = os.path.join(root_dir, "packages")# 如果 "packages"

Weex入门教程之4,获取当前全局环境变量和配置信息(屏幕高度、宽度等)

$getConfig() 获取当前全局环境变量和配置信息。 Returns: config (object): 配置对象;bundleUrl (string): bundle 的 url;debug (boolean): 是否是调试模式;env (object): 环境对象; weexVersion (string): Weex sdk 版本;appName (string): 应用名字;

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具,支持在一块屏幕上同时播放多个视频。其主要功能包括: 多视频播放:用户可以在一个窗口中同时播放任意数量的视频,数量仅受硬件性能限制。支持多种格式和流媒体:GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL(如 m3u8 链接)。自定义网格布局:用户可以配置播放器的网格布局,以适应不同的观看需求。硬

MFC中App,Doc,MainFrame,View各指针的互相获取

纸上得来终觉浅,为了熟悉获取方法,我建了个SDI。 首先说明这四个类的执行顺序是App->Doc->Main->View 另外添加CDialog类获得各个指针的方法。 多文档的获取有点小区别,有时间也总结一下。 //  App void CSDIApp::OnApp() {      //  App      //  Doc     CDocument *pD

android两种日志获取log4j

android   log4j 加载日志使用方法; 先上图: 有两种方式: 1:直接使用架包 加载(两个都要使用); 架包:android-logging-log4j-1.0.3.jar 、log4j-1.2.15.jar  (说明:也可以使用架包:log4j-1.2.17.jar)  2:对架包输入日志的二次封装使用; 1:直接使用 log4j 日志框架获取日志信息: A:配置 日志 文

17 通过ref代替DOM用来获取元素和组件的引用

重点 ref :官网给出的解释是: ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用,则引用将是该元素;如果在子组件上使用,则引用将是组件实例: <!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the c

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{

react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

1、定义方法并绑定 class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onCli