正文 

当前位置： 首页 > java > java语法

移动端适配js

ankle      2022-02-16     478

关键词：

移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配

方案一：

最初听李彦辉老师的课程使用rem 布局了一段时间，但是字体计算比较麻烦，也不太精确

方案二：

偶然在Q群里一群友分享的 动态改变根节点字体的方案布局，头部引用一个js。按照设计图的像素写rem，100px = 1rem 

//控制字体
var calculate_size = function() {
    var BASE_FONT_SIZE = 100;
    var docEl = document.documentElement,
        clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 640) + ‘px‘;        //此处可根据设计图可以改变数值
};
// 如果浏览器不支持addEventListener，则中止
if (document.addEventListener) {
    var resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘;
    window.addEventListener(resizeEvt, calculate_size, false);
    document.addEventListener(‘DOMContentLoaded‘, calculate_size, false);
    calculate_size();
}

 

方案三：

按照iphone6 750 的设计稿尺寸 用px 单位 缩小2倍的宽度布局，高度固定。750px = 375px。这是17年做移动端 常用的方式

 

方案四：

大神给的一个js 适配方案，动态创建meta 标签，动态改变 viewport 。单位是两倍 1px = 2px 。这种方案还在试用中

//添加viewport-mate标签缩放网页。
!function(userAgent) {
    if(userAgent.match(/AppleWebKit.*Mobile.*/)) {
        var screen_w = parseInt(window.screen.width),
            scale = screen_w / 750;
        if(/Android (d+.d+)/.test(userAgent)) {
            var version = parseFloat(RegExp.$1);
            if(userAgent.indexOf("MX") > -1 && version >= 5) {
                //alert(userAgent)
                document.write(‘<meta name="viewport" content="width=750,minimum-scale = ‘ + scale + ‘, maximum-scale = ‘ + scale + ‘, target-densitydpi=device-dpi">‘);
            } else {
                document.write(version > 2.3 ? ‘<meta name="viewport" content="width=750, minimum-scale = ‘ + scale + ‘, maximum-scale = ‘ + scale + ‘, target-densitydpi=device-dpi">‘ : ‘<meta name="viewport" content="width=750, target-densitydpi=device-dpi">‘);
            };
        } else {
            document.write(‘<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">‘);
        }
    }
}(navigator.userAgent);

 

关于移动端适配问题

移动端适配采用rem进行编写CSS，整理了三种方案：　　方案一：　　　　简单的JS适配functionresizeRoot(width){vardeviceWidth=document.documentElement.clientWidth,num=width,num1=num/100;if(deviceWidth>num){deviceWidth=num;}document.documen 查看详情

对移动端适配自己的理解

在写移动端H5页面的时候，最让人头疼的就是适配问题：接下来是我给我的最佳的解决方案和一个小例子第一步：适配js(rem.js)/***这里我们提取了一个公式(rem表示基准值)*rem基准值=document.documentElement.clientWidth*dpr/10*如果有一个区... 查看详情

vue移动端适配(代码片段)

定义 pxToRem.js，在mian.js里引用constgetFontSize=(fontSize)=>returnparseInt(fontSize/10+'',10)*10;;//@ts-ignore((win,lib)=>constdoc=win.document;constdocEl= 查看详情

nuxt移动端适配(代码片段)

nuxt移动端适配（flexible+postcss-px2rem）flexible.js根据需求自定义内容(functionflexible(window,document)letdocEl=document.documentElementletdpr=window.devicePixelRatio||1//adjustbodyfontsiz 查看详情

移动端适配方案：js实现动态改变根元素的字体大小

参考技术A通过js动态获取屏幕的宽度（document.clientWidth）然后根据屏幕宽度动态计算出rem的实际值。假设，640px的设备1rem=100px公式：rem=document.clientWidth/640*100px; 查看详情

flexible.js移动端适配安卓高分辨不兼容问题

根据网上找到的解决办法，对于安卓设备，把dpr=1改为当前设备的dprif(!dpr&&!scale){if(isIPhone){//iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&a 查看详情

移动端适配方式

1.动态改变viewport的值引入：<scripttype="text/javascript"src="ort.js"></script><script>2.改变body的zoom值<script>functionresetZoom(){ 　　vardeviceWidth=document.documentElement.clientWidth;/ 查看详情

vue/js自定义指令：实现元素滑动移动端适配以及边界处理

...ouch.clientX​​：触点相对于浏览器左上顶点的水平坐标（移动端属性）。​​T 查看详情

js动态适配移动端font-size,单位：rem

比如：目前我手中有一张psd图，大小为640*1010，适配苹果5的手机。方法步骤：1.我采用font-size=10px为640*1010手机的初始像素大小； 1rem=10px；  此时psd上有一个文字的大小为20px，即当前我的字体大小用rem表示为：font-size:1... 查看详情

移动端适配难点

1.移动端开发通常都会在html中写下以下的meta标签<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">需要注意的是无论是这样写还是用淘宝flexible.js动态生成meta头，目的只有一个，那就是让布局视口... 查看详情

业务线移动端适配方案总结

/***sass的基本的使用reset.scss*base.scss*DOMContentLoaded:当Dom加载完成*orientationchange:移动的时候和水平旋转的时候触发*resize:当调整窗口的时候触发*http://feg.netease.com/archives/570.html具体的文档的说明*///js加载vardocEl=doc.documentElement;va 查看详情

移动端多终端适配方案——lib-flexible

lib-flexible是什么？lib-flexible是一个制作H5适配的开源库，可以点击这里下载相关文件，获取需要的JavaScript和CSS文件。使用方法在head标签中引入js文件<scriptsrc="build/flexible_css.debug.js"></script><scriptsrc="build/flexible.debug.js"> 查看详情

vue开发移动端

参考技术Avue开发移动端项目依赖：一：移动端布局适配：   amfe-flexible/index：安装依赖，mian.js导入 import'amfe-flexible/index'//移动端适配   postcss-pxtorem：vue.config.js配置：  meta标签设置二：组件... 查看详情

移动端适配之less动态计算

参考技术A思路：先用js动态获取屏幕宽度，计算出html相应的fontsize，==>>得到1rem再利用less的计算属性，算出应该为多少rem760px/1rem=多少remhttps://www.weipxiu.com/2004.html 查看详情

移动端h5页面的最佳终端适配之flexible

lib-flexible是什么？lib-flexible是一个制作H5适配的开源库，可以点击这里下载相关文件，获取需要的JavaScript和CSS文件。当然你可以直接使用阿里CDN：<scriptsrc="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script& 查看详情

使用插件适配移动端布局(代码片段)

...  postcss-px-to-viewport来实现写px自动转化为vw,vh实现移动端的适配 vhvw是视口单位，代表当前设备宽度的所占的比例，有点类似于百分比 使用步骤如下 ①项目根目录下新建文件 postcss.config.js  (注意一定... 查看详情

vue移动端适配方案.md(代码片段)

移动端主要采用rem布局，vue+webpack，通过webpack编译，将css中px自动转成rem或其它单位，这里采用px2rem-loader进行转换，最后引入lib-flexible，实现不同设备不同分辨率的弹性适配。实现步骤第一步：引入lib-flexible#下载lib-flexiblenpmilib-... 查看详情

移动端高清屏适配方案

结论：用户体验要求很高的页面，如UV较高的页面，活动页这些应该以用户体验优先，应用flexiable方案在其它页面，固定视口，不缩放，使用rem做布局适配，js添加屏幕标识以便调整字体大小（即布局使用rem，字体使用百分比）... 查看详情