flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度

问题：手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度，出现横向滚动条

原因：手机获取手机屏幕宽度并计算出rem时出现偏差，明显宽余真实手机屏宽度

解决方案一：在页面里获取页面最外层dom的宽度即html的宽度与手机屏幕的宽度对比，如果两者不等，直接给html的font-size设置成真实手机宽度的rem,解决问题，简单粗暴，但我女朋友不喜欢我简单粗暴，喜欢温柔的，so~

解决方案二：修改flexible.js

改变部分：

// 处理不规则的rem计算
function fixFontSize(width, rem, html)
{ var html= doc.getElementsByTagName('html')[0];
var scale = 1;
var bodyWidth = parseInt(html.offsetWidth);
if (bodyWidth != width) {
scale = width / bodyWidth;
rem = rem * scale; docEl.style.fontSize = rem + 'px';
}
body.style.width = '100%'; }function refreshRem(){var width = docEl.getBoundingClientRect().width;
var hwidth = doc.docEl?doc.doeEl.clientWidth:doc.body.clientWidthif (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
fixFontSize(hwidth,rem)}

完整js

;(function(win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc.querySelector('meta[name="viewport"]');var flexibleEl = doc.querySelector('meta[name="flexible"]');var dpr = 0;var scale = 0;var tid;var flexible = lib.flexible || (lib.flexible = {});if (metaEl) {console.warn('将根据已有的meta标签来设置缩放比例');var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else if (flexibleEl) {var content = flexibleEl.getAttribute('content');if (content) {var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);if (initialDpr) {dpr = parseFloat(initialDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));    }if (maximumDpr) {dpr = parseFloat(maximumDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));    }}}if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){dpr = 2;} else {dpr = 1;}} else {// 其他设备下，仍旧使用1倍的方案dpr = 1;}scale = 1 / dpr;}docEl.setAttribute('data-dpr', dpr);if (!metaEl) {metaEl = doc.createElement('meta');metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap = doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}

// 处理不规则的rem计算

function fixFontSize(width, rem, html)

{ var html= doc.getElementsByTagName('html')[0];

var scale = 1;

var bodyWidth = parseInt(html.offsetWidth);

if (bodyWidth != width) {

scale = width / bodyWidth;

rem = rem * scale; docEl.style.fontSize = rem + 'px';

}

body.style.width = '100%'; }

function refreshRem(){var width = docEl.getBoundingClientRect().width;var hwidth = doc.docEl?doc.doeEl.clientWidth:doc.body.clientWidthif (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;fixFontSize(hwidth,rem)}win.addEventListener('resize', function() {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px';} else {doc.addEventListener('DOMContentLoaded', function(e) {doc.body.style.fontSize = 12 * dpr + 'px';}, false);}refreshRem();flexible.dpr = win.dpr = dpr;flexible.refreshRem = refreshRem;flexible.rem2px = function(d) {var val = parseFloat(d) * this.rem;if (typeof d === 'string' && d.match(/rem$/)) {val += 'px';}return val;}flexible.px2rem = function(d) {var val = parseFloat(d) / this.rem;if (typeof d === 'string' && d.match(/px$/)) {val += 'rem';}return val;}})(window, window['lib'] || (window['lib'] = {}));

转载于:https://www.cnblogs.com/wong-do/p/9398138.html

flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度相关推荐

如何用手机上的计算机弹音乐,如何使用手机qq音乐遥控电脑播歌
在qq音乐中,可以使用手机遥控电脑播放歌曲的功能,对于新用户来说,可能不知道具体的操作步骤,下面就让学习啦小编告诉你如何使用手机qq音乐遥控电脑播歌. 使用手机qq音乐遥控电脑播歌的方法首先手机要连 ...
Android9 短信恢复,如何免ROOT恢复手机上误删的短信？安卓手机短信恢复交通
如何免ROOT恢复手机上误删的短信?安卓手机短信恢复交通?手机短信可以存储着手机重要的数据,一旦误删就会给生活带来些许的烦恼,所以大家平时一定要对手机的数据进行备份,如果误删了手机的数据也不用担心,这 ...
手机网页宽度自动适应屏幕宽度的方…
方法一: <</SPAN>meta name="viewport" content="width=device-width, initial-scale ...
博客园首页新随笔联系订阅管理如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面...
本教程用的是我自己的手机三星A9,其他安卓手机方法也相同. 第一步首先你得打开手机的开发者选项,确保USB调试和通过USB验证应用程序保持打开状态,如图所示第二步,确保你的电脑和安卓手机都已经安装了 ...
手机上最简单的计算机,怎么把手机文件传到电脑，才最简单又快速？
首先,分享下我的经验,因为我的手机是华为,在手机和电脑都处在同一个网络环境下,打开华为手机的Huawe share,开启共享至电脑,手机上设置好电脑端访问验证的用户名和密码.电脑端显示名后,在电脑上打 ...
如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面
本教程用的是我自己的手机三星A9,其他安卓手机方法也相同. 第一步首先你得打开手机的开发者选项,确保USB调试和通过USB验证应用程序保持打开状态,如图所示第二步,确保你的电脑和安卓手机都已经安装了 ...
手机上怎么压缩html文件夹,iphone手机怎么压缩文件 iphone自带文件压缩功能操作方法分享...
iphone手机怎么压缩文件?目前国内有着很多的用户都在使用着iphone手机,iphone手机上也是有着很多的操作功能的,很多的用户都还是不是很熟悉,比如想用iphone手机进行压缩文件,应该怎么操 ...
在安卓手机上下载linux系统,如何在安卓手机上运行Ubuntu系统
Ubuntu是一款linux系统,一般我们都是将其运行在电脑中,可不可以在手机端也能运行Ubuntu呢?也是可以的,想知道如何实现的,就跟我来吧. 第一步: 首先, 你的手机需要获取root权限. 如 ...
手机上开发python有哪些软件-哪个手机软件有python题库
哪个手机软件有python题库? 推荐用leetcode,这款app十分适合大家来练习编程,它有着丰富的题库,而且对题目进行了分类,适合所有学习程度的用户. 下面给大家介绍一下这个软件的功能: 一.选 ...

flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度

flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度相关推荐

最新文章

热门文章