适配不同分辨率的另一种思路:页面缩放transform:scal

作者: 请叫我吉先生 | 来源:发表于2020-11-25 14:40 被阅读0次

适配不同分辨率的另一种思路:页面缩放transform:scal
iPhone屏幕尺寸/导航高度
Hunger Music
在不同分辨率下实现页面缩放实现页面适配
Android TV 开发之屏幕适配
iOS WKWebView 图片自适应并且禁止页面缩放
Rem.js 适配不同分辨率终端设置
屏幕适配
移动端适配方案
前端响应式页面开发

解决前端页面适配不同分辨率的问题有很多方法,见仁见智,可以在html的head标签里写js代码,在页面加载之前判断浏览器分辨率,选择加载对应的css文件.也可以用css3的媒体查询,写在link标签里引入不用css文件,还可以写在css文件里,不再赘述,这里说一下另一个思路:页面整体缩放.

效果

这种方法的思路是把整个页面等比例缩放偏移,上下或者左右多出来的部分留白,所以不会在所有分辨率都适配的很完美,故而,有条件的还是用其他更完美的方法吧.

效果图-左右留白

效果图-上下留白

这种方法是页面的整体缩放,里面的所有内容都会缩放,包括字体,图片等,所以排版布局不会变形.

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/index.css">
  <title>数据资产展示页面</title>
</head>

<body>
  <div id="container">
...
  </div>
</body>
</html>

css

html {
  padding: 0;
  margin: 0;
}
body{
  overflow: hidden;
  background: #ccc;
  height: 100vh;
}
#container {
  margin: 0 auto;
  box-sizing: border-box;
  background: url(../img/bj.jpg) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  transform-origin: left top;
  transition: transform 0.2s
}

js

  screenScale($('#container'));
  function screenScale(element) {
    let width = '1920';
    let height = '1080';
    let offsetWidth = window.innerWidth;
    let offsetHeight = window.innerHeight;
    let top = 0;
    let left = 0;
    let scaleX = offsetWidth / width;
    let scaleY = offsetHeight / height;
    let scale = Math.min(scaleX, scaleY);
    top = (offsetHeight - height * scale) / 2;
    left = (offsetWidth - width * scale) / 2;
    //核心代码
    const transform = `translate(${left}px, ${top}px) scale(${scale})`;
    element.width(width);
    element.height(height);
    element.css({'transform': transform});
  }
  window.onresize = function () {
    screenScale($('#container'));
  }