自适应浏览器分辨率的javascript函数

function changeWidth(now,target)
{ //now是现在代码所适应的宽度,如800;target是想要达到的显示器分辨率宽度
var widthStr;
var flag = true;
for(var i = 0;i < document.all.length;i++)
{
flag = true;
try
{
if(document.all.item(i).width != null)
{
widthStr = document.all.item(i).width.toString();
if(widthStr.indexOf("%") == -1 && widthStr != "" && widthStr != "0")
{
widthStr = (parseInt(widthStr) * target / now).toString();
document.all.item(i).width = parseInt(widthStr);
flag = false;
}
}
}
catch(e)
{
flag = true;
}
if(flag)
{
try
{
if(document.all.item(i).style.width != null)
{
widthStr = document.all.item(i).style.width.toString();
if(widthStr.indexOf("%") == -1 && widthStr != "" && widthStr != "0")
{
widthStr = (parseInt(widthStr) * target / now).toString();
document.all.item(i).style.width = parseInt(widthStr);
}
}
}
catch(e)
{
}
}
}
}

### Vue 实现屏幕分辨率自适应 #### 计算设计宽度并设置缩放比例 为了使Vue应用能够根据不同的屏幕尺寸进行适配,可以通过设定`designWidthValue`来指定设计稿的宽度,并基于此创建两个响应式的变量:`designWidth`表示设计稿的实际宽度;而`zoom`则用来保存依据当前浏览器窗口宽度所计算出来的缩放比率[^1]。 ```javascript import { ref, computed } from 'vue'; export function useZoom() { const designWidthValue = 750; // 设计图的标准宽度 let designWidth = ref(designWidthValue); const zoom = computed(() => document.documentElement.clientWidth / designWidth.value); return { designWidth, zoom }; } ``` #### 获取页面尺寸信息 为了让应用程序更好地理解其运行环境下的视口特性,可以编写一个名为`getPageSize`的功能函数。该函数会返回有关设备的信息——包括但不限于宽度、高度、宽高比以及判断是否属于移动终端、平板电脑或是台式机等类别。这有助于开发者根据不同类型的客户端做出相应的界面调整[^2]。 ```javascript function getPageSize() { const width = window.innerWidth; const height = window.innerHeight; const ratio = width / height; let deviceType; if (width >= 992) { deviceType = "desktop"; } else if (width >= 768 && width < 992) { deviceType = "tablet"; } else { deviceType = "mobile"; } return { width, height, ratio, deviceType }; } ``` #### 创建全局混入以支持组件级别的自适应逻辑 考虑到代码复用性和维护便利性的需求,在项目根目录下建立一个专门用于处理自适应功能的混合模块(如命名为`mixins.js`)。在这个文件里定义好通用的行为模式之后,就可以很方便地将其引入各个需要的地方了。只需修改对应的引用名称即可轻松集成至其他部分[^3]。 ```javascript // mixins/adaptation.js import { onMounted, watchEffect } from 'vue'; import { useZoom } from './useZoom'; const adaptationMixin = { setup(props) { const { zoom } = useZoom(); onMounted(() => { console.log(`Initial Zoom Level: ${zoom.value}`); }); watchEffect(() => { console.log(`Updated Zoom Level: ${zoom.value}`); }); return { zoom }; } }; export default adaptationMixin; ``` #### 表格控件的高度自适应方案 对于特定UI组件而言,比如表格类部件,则可能还需要额外考虑它们内部元素随容器变化的情况。这里介绍了一种针对Element UI框架中的el-table组件所做的优化措施。通过监听resize事件触发器,当检测到浏览器窗口发生改变时便重新评估表单区域应有的垂直空间大小[^4]。 ```javascript // src/directive/el-table/adaptive.js import ResizeObserver from 'resize-observer-polyfill'; import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'; const elTableAdaptiveDirective = { mounted(el, binding) { const observer = new ResizeObserver((entries) => { entries.forEach(entry => { entry.target.style.height = `${entry.contentRect.height}px`; }); }); observer.observe(el.querySelector('.el-table__body-wrapper')); addResizeListener(document.body, () => { setTimeout(() => { observer.disconnect(); observer.observe(el.querySelector('.el-table__body-wrapper')); }, 300); // 延迟执行确保动画完成后再更新 }); el.__resizeHandler__ = () => {}; Object.assign(el.__resizeHandler__, binding.value || {}); addResizeListener(el, el.__resizeHandler__); }, unmounted(el) { removeResizeListener(el, el.__resizeHandler__); } }; export default elTableAdaptiveDirective; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值