【一套px的css样式自适应浏览器大小，transform解决方案】

最新推荐文章于 2025-07-30 16:03:30 发布

原创最新推荐文章于 2025-07-30 16:03:30 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何实现根据浏览器窗口大小自适应当前页面的策略，通过CSS transform的scale和监听窗口resize事件来调整页面元素大小。针对火狐浏览器的不支持，采取了特定的滚动处理方案，同时处理了缩放后出现的空白和滚动问题，确保在不同浏览器中页面都能正确适应窗口尺寸变化。

根据浏览器窗口大小自适应当前页面

在现有项目固定px的基础上修改自适应(部分理解可能有误差欢迎指正)：

zoom控制可以根据浏览器窗口大小改变但是火狐浏览器全系列不支持zoom
使用css的transform里面的放大缩小进行页面自适应控制,把放大缩小的基准点这是到左上角

<div id="app" :style="{width:transformCustom ==1?'100%':'1024px',transform: 'scale('+transformCustom+')', 'transform-origin': '0 0'}">
	<router-view/>
</div>

监听页面窗口改变，获取当前页面的窗口大小，当页面窗口变小时页面元素也跟着缩小，当页面窗口变大时页面元素也跟着放大,其中的1024是页面缩放部分的固定宽度,当页面达到1024时开始缩放
注意页面元素不能是html或者body缩放，使用html或者body后左右会出现无法去除的空白

window.addEventListener('resize',() => {
	// @ts-ignore
	const winW = document.querySelector('body').clientWidth
	if ( winW < 1024 && winW > 600 ){
		transformCustom.value = winW / 1024
    }else{
      transformCustom.value = 1
    }
})

但是页面有个问题，随着浏览器的窗口改变会发现网页最下端出现一片空白
在控制台会显示body的高度和里面的内容实际高度不一致
这时就需要获取到实际缩放的元素的高度，根据缩放元素的高度设置body的高度

document.body.style.height =document.querySelector('#app').getBoundingClientRect().height+'px'

当把body设置完之后页面就能根据窗口缩放了，又会发现一个问题页面不能滑动了，这时就会出现一种情况，需要判断当前浏览器:
任何一个浏览器都不能设置html的overflow:hidden,否则页面会是一片空白

当浏览器时火狐时body隐藏html滑动，
其他谷歌浏览器时body滑动html可见

if( myBrowser() === 'Firefox'){
	setTimeout(()=>{
	// @ts-ignore
	document.body.style.overflow = 'hidden'
	// @ts-ignore
	document.querySelector('html').style.overflow = 'auto'
	},100)
}else{
	setTimeout(()=>{
	// @ts-ignore
	document.body.style.overflow = 'auto'
	// @ts-ignore
	document.querySelector('html').style.overflow = 'visible';
	},100)
}

完整代码：

setup(){
      const transformCustom = ref(1)
      const myBrowser = ()=> {
        const userAgent = navigator.userAgent;
        const isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
          return "Opera";
        } //Opera
        if (userAgent.indexOf("Firefox") > -1) {
          return "Firefox";
        } //Firefox
        if (userAgent.indexOf("Edg") > -1) {
          return "Edge";
        }
        if (userAgent.indexOf("Chrome") > -1){
          return "Chrome";
        } //Chrome
        if (userAgent.indexOf("Safari") > -1) {
          return "Safari";
        } //Safari
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
          return "IE";
        } //IE
        if (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1) {
          return "IE11";
        } //IE11
      }

        // @ts-ignore
        const winW = document.querySelector('body').offsetWidth
        if (winW< 1024 && winW > 600){
          transformCustom.value = winW / 1024
          if( myBrowser() === 'Firefox'){
            setTimeout(()=>{
              // @ts-ignore
              document.body.style.height =document.querySelector('#app').getBoundingClientRect().height+'px'
              document.body.style.overflow = 'hidden'
              // @ts-ignore
              document.querySelector('html').style.overflow = 'auto'
            },100)

          }else{
            // @ts-ignore
            document.querySelector('body').style.height =document.querySelector('#app').getBoundingClientRect().height+'px'
            document.body.style.overflow = 'auto'
            // @ts-ignore
            document.querySelector('html').style.overflow = 'visible';
          }
        }else{
          transformCustom.value = 1
        }

      window.addEventListener('resize',() => {
        // @ts-ignore
        const winW = document.querySelector('body').clientWidth
        if ( winW < 1024 && winW > 600 ){
          transformCustom.value = winW / 1024
        }else{
          transformCustom.value = 1
        }
        if( myBrowser() === 'Firefox'){
          setTimeout(()=>{
            // @ts-ignore
            document.body.style.height =document.querySelector('#app').getBoundingClientRect().height+'px'
            document.body.style.overflow = 'hidden'
            // @ts-ignore
            document.querySelector('html').style.overflow = 'auto'
          },100)
        }else{
          setTimeout(()=>{
            // @ts-ignore
            document.body.style.height =document.querySelector('#app').getBoundingClientRect().height+'px'
            document.body.style.overflow = 'auto'
            // @ts-ignore
            document.querySelector('html').style.overflow = 'visible';
          },100)
        }
      })

      return {transformCustom}
    }