[兼容问题]关于页面适配的整理

先进行分类。有空填坑。

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

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

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

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

考虑：最小高度是多少。

（参考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': '',
    })
}