[适配]关于页面适配的整理

先进行分类。有空填坑。

1.pc或h5长页面，根据浏览器宽度适配。

考虑：fixed属性的页面头部、弹窗，可能需要才用.container .top  .pup 三部分分别进行适配。

(function() {
    function fit_block() {
        var clientw = document.documentElement.clientWidth
        
        var w = 1920  // 根据素材宽度
        var scaleX = clientw / w
        
        var ele      = document.querySelector('.container').style
        ele.transformOrigin       = '0px 0px 0px'
        ele.webkitTransformOrigin = '0px 0px 0px'
        ele.transform             = 'scale(' + scaleX + ')'
        ele.webkitTransform       = 'scale(' + scaleX + ')'
        ele.display               = 'block'

          // ele.height = 【页面高度】 * scaleX + "px"

    }

    fit_block()
    window.onresize = function() {
        fit_block()
    }
})()

 

扩展1. h5长页面，根据浏览器宽度适配。在PC端时适配750px宽度展示。

考虑：fixed属性的页面头部、弹窗，可能需要才用.container .top  .pup 三部分分别进行适配。

（参考wh春节活动新闻态）

(function() {
    function fit_block() {
        var is_pc = !(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))
        var clientw = is_pc ? 750 : document.documentElement.clientWidth
        
        var w = 1080
        var scaleX = clientw / w
        
        var ele      = document.querySelector('body').style
        ele.transformOrigin       = '0px 0px 0px'
        ele.webkitTransformOrigin = '0px 0px 0px'
        ele.transform             = 'scale(' + scaleX + ')'
        ele.webkitTransform       = 'scale(' + scaleX + ')'
        ele.display               = 'block'
    }

    fit_block()
    window.onresize = function() {
        fit_block()
    }
})() 

 

1扩展. 考虑当屏幕宽度小于某个数值时，不再进行宽度占满适配。这样可以保证页面不会被缩放得太小

（参考ddz首页pc版）

 

2. h5单屏，根据浏览器的宽度进行居中适配。

（参考wbcz测试资格查询页）

不考虑最小宽度：

// 原页面设计稿 270 * 480
(function flexible (window, document) {
    function fit_box() {
        var ele          = document.querySelector('.container').style
        var pup_bg       = document.querySelector('#pup_bg').style
        var clientWidth  = document.documentElement.clientWidth
        var clientHeight = document.documentElement.clientHeight
        var w = 270
        var scaleX = ((document.documentElement.clientWidth < w ? w : document.documentElement.clientWidth) / w)
        var h = document.documentElement.clientHeight / scaleX

        ele.height                = 270 * scaleX + 'px'
        ele.transformOrigin       = '0px 0px 0px'
        ele.webkitTransformOrigin = '0px 0px 0px'
        ele.transform             = 'scale(' + scaleX + ')'
        ele.webkitTransform       = 'scale(' + scaleX + ')'
        ele.display               = 'block'

        pup_bg.height = ((clientWidth / clientHeight < 0.5625) ? 480 * clientHeight / clientWidth * 0.5625 : 480)+ 'px'
    }

    fit_box()
    window.onresize = function () {
        fit_box()
    }
}(window, document))

考虑最小宽度。（待补充）

（参考ddz春节剪纸活动）

 

2扩展. 考虑固定宽高的盒子，浏览器进行宽度或高度适配，总之要在一屏幕内完全显示。

  类似需求可能在图片放入某个框的时候常常会出现。

（暂无参考）

 

3. 判断屏幕是横屏或者竖屏，针对不同屏幕进行旋转适配。（之前单开的链接在：https://www.cnblogs.com/ximu1009/p/16700191.html

缺陷：如果使用swiper插件，在旋转之后滑动手势无法旋转，慎用此方法！！

场景：（例如H5小游戏）

① 页面内容在一个屏幕内展示完，不上下左右滑动。

② 页面内容左右居中/上下居中。

③ 页面原本内容为竖屏，需要在横屏浏览器中强制左旋90°。

// 横竖屏适配
var vertical = document.documentElement.clientHeight >= document.documentElement.clientWidth
if(!vertical){
    var wth = document.documentElement.clientWidth / document.documentElement.clientHeight
    $('body').css({ 
        'transform': 'rotate(-90deg)  scale(' + wth +') ', 
        'transform-origin': 'center center',
    })
} else {
    $('body').css({
        'transform': '', 
        'transform-origin': '',
    })
}

 

4.设计稿为H5单页，PC强制居中展示，H5采用高度适配

(参考xytx测试资格查询页)

不考虑最小高度：

(function flexible (window, document) {
    function fit_box() {
        var ele          = document.querySelector('.container').style
        var pup_bg       = document.querySelector('#pup_bg').style
        var clientWidth  = document.documentElement.clientWidth
        var clientHeight = document.documentElement.clientHeight
        var h            = 480
        var scaleX       = document.documentElement.clientHeight / h
        var left         = (document.documentElement.clientWidth - 270 * scaleX) / 2

        ele.transformOrigin       = '0px 0px 0px'
        ele.webkitTransformOrigin = '0px 0px 0px'
        ele.transform             = 'scale(' + scaleX + ')'
        ele.webkitTransform       = 'scale(' + scaleX + ')'
        ele.display               = 'block'
        ele.left                  = left + 'px'
    }

    fit_box()
    window.onresize = function() {
        fit_box()
    }
}(window, document))

 

 5. vue2 解决1920*1080 125%放缩笔记本屏幕大小适配问题。

https://blog.csdn.net/weixin_48200589/article/details/125381459

但不好用，现在很多机型是16:10的屏幕。