html使用手机默认字体,开发移动端H5的时候，字体该不该随着手机系统字体的调整而变化？...

// 我的根html字体是 font-size:calc(100vw/7.5);

function countFont1(){

var originRootFontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));

var realSize = document.documentElement.clientWidth/7.5; // 这里的7.5是我自己，你看着调

console.log("originRootFontSize："+originRootFontSize + "realSize:" + realSize); // 系统字体放大缩小，originRootFontSize 和 realSize相等的话就可以了

if (originRootFontSize === realSize) {

return;

}

// 计算原字体和放大后字体的比例

var scaleFactor = realSize / originRootFontSize ;

// 取html元素的字体大小

// 注意，这个大小也经过缩放了

// 所以下方计算的时候 *scaledFontSize是原来的html字体大小

// 再次 *scaledFontSize才是我们要设置的大小

if (scaleFactor !== 1) {

document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + originRootFontSize * scaleFactor * scaleFactor + 'px !important';

}

$(window).resize(function() {

setTimeout(() =>{ // 我这里是设置延时覆盖原先全局 html 的font-size

countFont1();

},0)

});

(function(){

setTimeout(() =>{ // 我这里是设置延时覆盖原先全局 html 的font-size

countFont1();

},0)

})();

我自己用的话亲测可以，react中也可以用。

html使用手机默认字体,开发移动端H5的时候，字体该不该随着手机系统字体的调整而变化？...相关推荐

移动端h5不支持font-family里面的微软雅黑等等字体
首先我们来理解一下pc端为什么可以看到网站上设置的微软雅黑字体:微软在2006年12月发布微软雅黑随简体中文版Windows Vista一起发布,是Windows Vista默认字体.意思就是wind ...
vue开发移动端h5环境搭建
技术选型公司现在需要开发移动端的h5,使用现在比较流行的vue 2.0开发,使用的脚手架是Vant2,网络访问使用的是axios,路由跳转使用的是vue-router,开发工具是vscode,作为一 ...
charles代理手机调试_H5开发移动端调试之 Charles 抓包和 Map Remote
移动端调试是每一位前端工程师必须掌握的技能,在移动端环境上往往有很多不同的情况,我们需要借助一些工具来调试.本文将介绍 Mac 如何安装 charles,进行抓包.以及一些应用场景. 场景一:app端 ...
公众号开发-移动端h5页面调用微信扫一扫
前言: 大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例. 前不久,接到这么一个需求:在H5网页实现扫一扫功能. 要求:微信端以及浏览器均可以实现扫一扫功能,而且不能 ...
【长按图片保存到相册】Vue移动端H5页面实现长按图片保存到手机功能
移动端.H5长按保存到相册.web端长按自行选择保存位置先上效果图 2.源码 <template><div class="save-file"><d ...
VUE 移动端H5页面实现长按图片保存到手机功能
需求背景: 我们做的项目类似于支付二维码,让用户保存到手机可以去制作亚克力牌用来收钱. 效果图: 踩坑: 在网上查了好多方法,但是都没有用,脑袋秃秃,html5plus只适用于app项目跟小程序,大家 ...
php清除h5格式,移动端H5页面端怎样除去input输入框的默认样式
这次给大家带来移动端H5页面端怎样除去input输入框的默认样式,移动端H5页面端除去input输入框的默认样式的注意事项有哪些,下面就是实战案例,一起来看一下. 前两天在开发在微信访问的HTML5页 ...
android 11.0 12.0添加系统字体并且设置为默认字体
1.概述在11.0 12.0系统定制化开发中,在产品定制中,有产品需求对于系统字体风格不太满意,所以想要更换系统的默认字体,对于系统字体的修改也是常有的功能,而系统默认也支持增加字体,所以就来添加楷 ...
17个国内外手机APP应用开发平台推荐
17个国内外手机APP应用开发平台推荐随着智能手机的不断普及,安卓.苹果系统不断冲击着手机用户的神经,越来越多的技术热人员投入到了手机应用开发的热潮中,这里就总结归类下那些国内外优秀的手机APP应用 ...

html使用手机默认字体,开发移动端H5的时候，字体该不该随着手机系统字体的调整而变化？...

html使用手机默认字体,开发移动端H5的时候，字体该不该随着手机系统字体的调整而变化？...相关推荐

最新文章

热门文章