系统字体大小导致rem布局变大

缘由:内部测试都ok,交给客户看的时候,整天变大,本来7.5rem = 750px,实际上大了很多。

各种情况排除后,发现是客户手机字体大小调整到了特大

解决办法

getComputedStyle方法能够获取到计算后的样式、大小。

最后优化完的代码如下。


    (function (doc, win) {

      var isAndroid = win.navigator.appVersion.match(/android/gi);
      var isIPhone = win.navigator.appVersion.match(/iphone/gi);

      var scale = 1.0;
      var ratio = 1;
      if(isIPhone) {
        if (window.devicePixelRatio == 2) {
          scale *= 0.5;
          ratio *= 2;
        }
        if (window.devicePixelRatio == 3) {
          scale *= (1/3);
          ratio *= 3;
        }
      }
      var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';
      document.write(text);

      var docEl = doc.documentElement
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 100 * (clientWidth / 750)  + 'px'

        // 解决部分rem特别大的问题
        var docElFontSize = docEl.style.fontSize.replace(/px/gi, '')
        var computedFontSize = win.getComputedStyle(docEl)['font-size'].replace(/px/gi, '')
        docElFontSize != computedFontSize && (docEl.style.fontSize = docElFontSize * docElFontSize / computedFontSize + 'px')
      }
      if (!doc.addEventListener) return
      recalc()
      win.addEventListener(resizeEvt, recalc, false)
    })(document, window);

原文地址:https://www.cnblogs.com/jarjune/p/10541517.html

时间: 2024-10-12 17:51:55

系统字体大小导致rem布局变大的相关文章

用js判断屏幕的宽度,改变html字体大小用rem布局

if (document.documentElement.clientWidth > 600) {//页面宽度大于600px让其宽度等于600px,字体大小等于60px,居中 document.documentElement.style.width = "600px"; document.documentElement.style.fontSize = "60px"; document.documentElement.style.margin = "

解决因为手机设置字体大小导致h5页面在webview中变形的BUG

首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了. 测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩. 你怀疑是APP的问题,但是客户端死活不承认.你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题.于是测

系统字体大小设置

问题: 在项目中遇到需要修改字体大小的问题.当修改设置里面字体大小的时候,根据情况决定当前应用是否需要同步系统的字体大小.一般在需要完整显示字体的应用中有此需求.华为荣耀的手机桌面似乎就针对这个做了判断,不管系统字体修改成什么样,似乎都是一个默认值,反正我是没有用肉眼看到有什么改变.虽然有点固定,但是好歹也整成了可以完整显示应用名称了. 分析: 在设置中既然有该功能,那么我们就进去看看他的代码了.设置界面对于的xml为Settings_headers.xml,一般这个地方比较难找,新手一般只需要

Android模仿三星手机系统滑动条滑动时滑块变大的特效

使用三星手机的过程中发现三星手机系统自带的滑动条有一个特效,比如调节亮度的滑动条,在滑动滑块的过程中,滑块会变大,功能很小但是体验却很好,于是决定做一个这样的效果出来,好了废话不多说了,下面开始实现 我们知道在SeekBar控件中有两个很重要的属性,一个是进度条(即android:progressDrawable属性),一个是滑块(即android:thumb属性),我们主要用到的是滑块的特效,这里就把进度条的配置稍微的介绍一下,先上代码: 在res/xml文件夹下创建seekbar_progr

怎样改动android系统字体大小

改动字体大小的方法是运用到一个ActivityManagerNative类 首先先在代码宣告 private Configuration mconfig = new Configuration(); 并在代码中设置要改变字体大小的值 mconfig.fontScale = 0.75f;//默觉得1.0f 另外.还须要在AndroidManifest.xml中加上 android:configChanges="fontScale" 而在展讯平台,预设字体大小 超大: 1.3f 大:1.1

如何修改android系统字体大小

修改字体大小的方法是运用到一个ActivityManagerNative类 首先先在代码宣告 private Configuration mconfig = new Configuration(); 并在代码中设置要改变字体大小的值 mconfig.fontScale = 0.75f;//默认为1.0f 另外,还需要在AndroidManifest.xml中加上 android:configChanges="fontScale" 而在展讯平台,预设字体大小 超大: 1.3f 大:1.1

因为手机设置字体大小导致h5页面在webview中变形的BUG

出现这个问题,有以下因素 你的页面采用了rem单位,并且是采用js动态计算html的font-size你的页面被加在了APP中的webview中这该死的手机被重设了字体大小解决方法一般,我们动态计算好html的font-size之后,我们就啥都不干了,就走了.但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值,和我们设置的是不是一样.如果不一样,就要根据比例再设置一次. 以下是我的完整代码:

手机字体大小 px - rem javascript 换算

(function () { function o() { document.documentElement.style.fontSize = (document.documentElement.clientWidth ) / 31.25 + "px" } var e = null; window.addEventListener("resize", function () { clearTimeout(e), e = setTimeout(o, 100) }, !

安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?

webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentfault.com/q/1010000006068362?_ea=1015158