欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

h5页面适配方法

程序员文章站 2024-02-29 18:44:28
...

1.viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width :页面宽度为设备屏幕的宽度
initial-scale=1.0:初始的缩放比
minimum-scale=0.5:最小缩放比
maximum-scale=2.0:最大缩放比
user-scalable=yes:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

根据viewpot,可以根据设备屏幕宽度与设计稿宽度计算出缩放比,设置initial-scale就可以达到适配效果;缺点:原生组件(例:video)中的控件大小会进行缩放

(function() {  
    var target = 750;   //设计图纸的大小
    
    var scale = window.screen.width / target;   //计算出缩放比例

    var meta = document.createElement("meta");  
    meta.name = "viewport";  
    meta.content = "width=device-width, initial-scale=" + scale + ", user-scalable=no";  
    document.head.appendChild(meta);
})()

2.rem相对单位

rem 相对的是HTML根元素的字体大小,我们只需要将html的字体大小设置为**(屏幕宽度 / 设计稿宽度)px**,就可以将屏幕分为(设计稿宽度)份;例:设计稿宽度为750px,将根字体设置为(屏幕宽度 / 750)px, 就将屏幕宽度分为750份;编写样式时就可以用1rem替代设计稿上的1px。

		// 获取屏幕宽度
		let width = document.documentElement.clientWidth || document.body.clientWidth;
		let r = width / 750;  //计算字体大小
		// 获取html元素
        let a = document.getElementsByTagName('html')[0];
        //设置html字体大小
        a.setAttribute('style', 'font-size:' +  r  + 'px');

3.vw适配

vw:视窗宽度的百分比,1vw=1%视窗宽度;
设置大小时只需设置为(元素尺寸 / 设计稿宽度)*100 vw 即可