js css html 让页面自动适配手机电脑设备页面进行缩放【强,无效留言来找我】

问题:

页面css非按百分比,设置了固定px宽度、高度,如何快速、方便,让页面按手机设备自动设配页面缩放?

通常几种方法:

1、百分比再设置一下 mata viewport

2、flex布局

3、rem

4、css的MediaQuery模块,也就是  @media screen and (max-width: 800px) { }/*当屏幕尺寸小于800px时,应用下面的CSS样式*/

5、略,总之就是加改!

 

重点

省事暴力快速方法:(话不多说)

前提:如果你的页面是按固定px值,又不想太麻烦,那就(¬_¬)对了

(通过 js 动态控制 meta  viewport 的初始缩放大小) 直接复制js 粘贴到 head meta viewport 下

//我的html meta viewport,定义 id,下面有用
<meta name="viewport" id="view" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> 

<script type="text/javascript">
    
//获取设备类型

	var ua = navigator.userAgent;

	var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

	isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

	isAndroid = ua.match(/(Android)\s+([\d.]+)/),

	isMobile = isIphone || isAndroid;

	//判断

	if(isMobile){
//获取设备像素
	    var devicewidth = document.documentElement.clientWidth;
	    var devicewidth2 = window.screen.width;
	    console.log(devicewidth2);
	    console.log(devicewidth);
//按照比例 设置id为view的content值为scale,ok
	    var scale = devicewidth / 1200; //1200是我原本设计PC页面固定的大小,根据你自己页面进行修改
	    console.log(scale);

	  	document.getElementById("view").setAttribute('content',"user-scalable=yes, width=device-width, initial-scale="+scale);

	}else{

	}

</script>

 

效果就是:动态按比例缩放

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值