【网页开发】css关于移动端自适应以及transform的scale()缩放白边问题

小卓仗剑走天涯

已于 2022-06-14 16:17:14 修改

阅读量6.1k

点赞数 7

分类专栏：网页开发文章标签： css css3 前端

于 2022-01-19 14:08:09 首次发布

本文链接：https://blog.csdn.net/m0_66345324/article/details/122579720

版权

网页开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css关于移动端自适应问题

问题

随着越来越多的用户因为便利改用手机浏览网页，但是当前市场上手机屏幕宽度不尽相同，为了在不同宽度的手机屏幕上良好的显示我们制作的网页，我们需要解决方案。

原理

前端解决手机屏幕自适应的手段有很多，究其原理，主要分为两个方面。

一、使用百分比长度单位，如：vw、vh、vm、em、rem、%。不同之处参照百分比单位比较

优点：一套css代码即可适应所有屏幕宽度不同的手机；（简单，网站在不同设备上等比例缩放）

二、使用固定长度单位px，再使用js根据当前屏幕宽度与固定宽度计算比例，进行网页缩放。

优点：网页宽度恒定，便于计算。（内部div为固定值采用此方法）

实现

一、使用百分比宽度单位实现移动端屏幕自适应

如果你整个div包括内部div都采用百分比宽度进行网页设计，那么在手机上也会满足这个比例，但是这种情况的网站是比较少见的，也一般不会遇到太大的问题！

二、使用固定长度单位px，再使用js进行网页缩放来实现手机自适应

<html>
<head>
    <style>
        *{margin: 0;padding: 0;}
        #div1{width: 750px;height: 600px;background-color: red;}
        #div2{width: 375px;height: 300px;background-color: green;}
    </style>
</head>
<body id="body">
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
<script type="text/javascript">
function suofang(id) {
    var wNum= 750;
    var oWidth = window.screen.width;
    var objId = document.getElementById(id);
    rate = oWidth / wNum;
    if (oWidth < 1920) {
        objId.style.webkitTransformOrigin = "left top 0px";
        objId.style.webkitTransform = "scale(" + rate + ")";
    }
};
suofang("body");
</script>
</html>

PC端和移动端效果实现

三、即通过js操纵meta标签中的initial-scale（即网页初始缩放比例）属性即可

修改上述js为下列代码即可

<script type="text/javascript">
//网页缩放函数
function suofang() {
    var num = 750;//css中固定的网页宽度
    var oWidth = window.screen.width;//获取当前手机屏幕宽度
    rate = oWidth / num;//缩放比例 = 当前手机屏幕宽度/css中固定的网页宽度
    if (oWidth < 1920) {
        document.getElementsByTagName('meta')[name="viewport"].content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height,initial-scale="+
        rate+",maximum-scale=2.0,user-scalable=no";//修改meta的属性
    }
};
suofang();
</script>

css手机端transform的scale()的缩放白边问题

当我采用第二种方法js代码解决了移动端的自适用问题后，结果就发现了transform的缩放白边问题，如果我们仔细观察的话就会发现上图下方有较大的白边出现，只不过因为下方都是白色的所以不太明显，下图明显：

在上一篇文章中，我们解决了网页的白边缩放问题，移动端也适用。

解决思路：调整被缩小的外层高度，并设置外面层的大小为里层缩放后的大小！

<script>
	function suofang(id) {
    var wNum = 1140;//css中固定的实际网页宽度
    var hNum = 600;//css中固定的实际网页高度
    var oWidth = window.screen.width;//获取当前手机屏幕宽度
    var objId = document.getElementById(id);//获取传入的id标签对象
    var myDiv  = document.getElementById("scope-solution");//获取外层id
    wRate = oWidth / wNum;
    var hscope = hNum * wRate;
    if (oWidth < 1920) {
    	myDiv.style.height = hscope+"px";//令该DIV的大小为缩放后应该的大小
    	
        objId.style.transformOrigin = "left top 0px";
        objId.style.transform = "scale(" + wRate + ")";
        /* IE 9 */
        objId.style.msTransformOrigin = "left top 0px";
        objId.style.msTransform = "scale(" + wRate + ")";
        /* Safari and Chrome */
        objId.style.webkitTransformOrigin = "left top 0px";
        objId.style.webkitTransform = "scale(" + wRate + ")";
        /* Firefox */
        objId.style.mozTransformOrigin = "left top 0px";
        objId.style.mozTransform = "scale(" + wRate + ")";
        /* Opera */
        objId.style.oTransformOrigin = "left top 0px";
        objId.style.oTransform = "scale(" + wRate + ")";
    }
};

	suofang("solution");//执行缩放
</script>