移动端适配

[chao]

已于 2023-12-18 16:56:38 修改

阅读量426

点赞数 7

分类专栏：移动端文章标签：开发语言 css

于 2023-12-18 16:31:40 首次发布

本文链接：https://blog.csdn.net/kjc513/article/details/135066036

版权

移动端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

适配

1. 百分比适配

直接按百分比设置宽度即可

2. viewport适配

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
		<script>
			// 根据设备尺寸设置meta的缩放值
			(function(){
				var curWidth=document.documentElement.clientWidth || window.innerWidth; || window.screen.width;
				var targetWidth=375;
				var scale=curWidth/targetWidth;
        var meta=document.querySelector('meta[name="viewport"]');
				meta.content='initial-scale='+scale+',user-scalable=no,minimum-scale='+scale+',maximum-scale='+scale+'';
			})();
		</script>
	</head>
	<body>
	</body>
</html>

3. DPR缩放适配

// 与viewport方式类似，替换为以下scale的计算方式即可
var scale=1/window.devicePixelRatio;

4. vw适配

通篇使用vw
通过vw设置根节点字体大小，页面里的尺寸使用rem

5. rem适配

设置根节点字体大小，页面里的尺寸使用rem

(function(doc, win, designWidth) {
  var html = doc.documentElement;
  function refreshRem () {
    var clientWidth = html.getBoundingClientRect().width;	//取宽度还可以用这种方式
    if (clientWidth >= designWidth) {
      html.style.fontSize = '100px';
    } else {
      html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
    }
    //html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
  };
  doc.addEventListener('DOMContentLoaded', refreshRem);
})(document, window, 750);

6. hoscss/lib-flexible适配

相关链接：hoscss、lib-flexible
根据尺寸动态设置根节点大小，页面内尺寸使用rem

// 或者直接引入以下js文件即可
(function( window , document ){
	'use strict';
	var hotcss = {};
	(function() {
    //根据devicePixelRatio自定计算scale
    //可以有效解决移动端1px这个世纪难题。
    var viewportEl = document.querySelector('meta[name="viewport"]'),
      hotcssEl = document.querySelector('meta[name="hotcss"]'),
      dpr = window.devicePixelRatio || 1,
      maxWidth = 540,
      designWidth = 0;
    dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );
    //允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
    if (hotcssEl) {
      var hotcssCon = hotcssEl.getAttribute('content');
      if (hotcssCon) {
        var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/);
        if (initialDprMatch) {
          dpr = parseFloat(initialDprMatch[1]);
        }
        var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/);
        if (maxWidthMatch) {
          maxWidth = parseFloat(maxWidthMatch[1]);
        }
        var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/);
        if (designWidthMatch) {
          designWidth = parseFloat(designWidthMatch[1]);
        }
      }
    }
    document.documentElement.setAttribute('data-dpr', dpr);
    hotcss.dpr = dpr;
    document.documentElement.setAttribute('max-width', maxWidth);
    hotcss.maxWidth = maxWidth;
    if( designWidth ){
      document.documentElement.setAttribute('design-width', designWidth);
    }
    hotcss.designWidth = designWidth; // 保证px2rem 和 rem2px 不传第二个参数时, 获取hotcss.designWidth是undefined导致的NaN
    var scale = 1 / dpr,
        content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';
    if (viewportEl) {
      viewportEl.setAttribute('content', content);
    } else {
      viewportEl = document.createElement('meta');
      viewportEl.setAttribute('name', 'viewport');
      viewportEl.setAttribute('content', content);
      document.head.appendChild(viewportEl);
    }
  })();
	hotcss.px2rem = function( px , designWidth ){
		if( !designWidth ){
			//如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
			//否则可以在第二个参数告诉我你的设计图是多大。
			designWidth = parseInt(hotcss.designWidth , 10);
		}
		return parseInt(px,10)*320/designWidth/20;
	}
	hotcss.rem2px = function( rem , designWidth ){
		//新增一个rem2px的方法。用法和px2rem一致。
		if( !designWidth ){
			designWidth = parseInt(hotcss.designWidth , 10);
		}
		//rem可能为小数，这里不再做处理了
		return rem*20*designWidth/320;
	}
	hotcss.mresize = function(){
		//对，这个就是核心方法了，给HTML设置font-size。
		var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
    if( hotcss.maxWidth && (innerWidth/hotcss.dpr > hotcss.maxWidth) ){
        innerWidth = hotcss.maxWidth*hotcss.dpr;
    }
		if( !innerWidth ){ return false;}
		document.documentElement.style.fontSize = ( innerWidth*20/320 ) + 'px';
    hotcss.callback && hotcss.callback();
	};
	hotcss.mresize(); 
	//直接调用一次
	window.addEventListener( 'resize' , function(){
		clearTimeout( hotcss.tid );
		hotcss.tid = setTimeout( hotcss.mresize , 33 );
	} , false ); 
	//绑定resize的时候调用
	window.addEventListener( 'load' , hotcss.mresize , false ); 
	//防止不明原因的bug。load之后再调用一次。
	setTimeout(function(){
		hotcss.mresize(); 
		//防止某些机型怪异现象，异步再调用一次
	},333)
	window.hotcss = hotcss; 
})( window , document );