h5页面嵌入企业微信 以及第三方app中,ios兼容安卓鸿蒙不兼容问题
app开发的时候,会默认的对浏览器的使用会做一些默认的设置,就比如下面的这一条属性:WebSettings.setUseWideViewPort(true);//设置此属性,可任意比例缩放,一般的安卓的app的开发者都会默认禁止这条属性;说是会对其他的东西有影响。那么这样的话,就不能够实现任意比例的缩放了,也当然达不到我们想要的结果。如我这样ios 正常。。在安卓 鸿蒙 都捕捉不到正常高度下面有三
·
app开发的时候,会默认的对浏览器的使用会做一些默认的设置,就比如下面的这一条属性:WebSettings.setUseWideViewPort(true);//设置此属性,可任意比例缩放
,一般的安卓的app的开发者都会默认禁止这条属性;说是会对其他的东西有影响。那么这样的话,就不能够实现任意比例的缩放了,也当然达不到我们想要的结果。如我这样
pc ios 正常。。在安卓 鸿蒙 都捕捉不到正常高度
下面有三种方法替换掉原有的 rem适配方法
1、
<script>
// 适用于750的设计稿
var iScale = 1;
// 通过页面加载的时候去获取用户设备的物理像素比
iScale = iScale / window.devicePixelRatio;
// 然后来设置html的<meta>表现的缩放属性,从而达到在任意页面实现页面布局的自适应的效果
document.write('<meta name="viewport" content="width=device-width,' +
'initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + ',user-scalable=no" />')
// 获取浏览器窗口文档显示区域的宽度,不包括滚动条。
var iWidth = document.documentElement.clientWidth;
// 设置页面基础的字体大小
document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
</script>
2、
<script>
var docEl = document.documentElement,
//当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
//总来的来就是监听当前窗口的变化,一旦有变化就需要重新设置根字体的值
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//设置根字体大小1:50适用于375的设计稿,需要变更,就更改基础字体的数值
docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
3、
window.onload=function(){
var e=(document.documentElement.clientWidth>=640?640:document.documentElement.clientWidth)/320*12;
document.documentElement.clientHeight;document.getElementsByTagName("html")[0].style.fontSize=e+"px"
};
更多推荐
已为社区贡献1条内容
所有评论(0)