前端方面移动端适配方法，减少兼容性问题

使用viewport配置，确保完美视口。

关键属性解析：

width=device-width：将视口宽度设置为设备宽度

initial-scale=1.0：初始缩放比例为1

user-scalable=no：禁用用户缩放

viewport-fit=cover：适配刘海屏

使用rem实现弹性布局

rem是相对于根元素（html）的字体大小的单位，可以实现整体布局的弹性缩放。

// 设置 rem 基准值 (function flexible() { const docEl = document.documentElement; function setRemUnit() { const rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + 'px'; } setRemUnit(); window.addEventListener('resize', setRemUnit); window.addEventListener('orientationchange', setRemUnit); })();a

配套的CSS使用：

css 复制代码

.container {
    width: 7.5rem;  /* 750px / 100 */
    height: 1rem;   /* 100px / 100 */
    font-size: 0.28rem; /* 28px / 100 */
}

CSS媒体查询处理不同尺寸

使用媒体查询针对不同屏幕尺寸定制样式。

/* iPhone SE */ @media screen and (max-width: 374px) { .container { font-size: 14px; } }

/* iPhone 6/7/8/X */ @media screen and (min-width: 375px) and (max-width: 413px) { .container { font-size: 16px; } }

/* iPhone 6/7/8 Plus */ @media screen and (min-width: 414px) { .container { font-size: 18px; } }
1px边框问题解决方案

在高清屏幕下1px边框显示过粗的解决方案。

.border-1px { position: relative; &::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #000; transform: scaleY(0.5); transform-origin: bottom; } }

// 2x屏 @media (-webkit-min-device-pixel-ratio: 2) { .border-1px::after { transform: scaleY(0.5); } } // 3x屏 @media (-webkit-min-device-pixel-ratio: 3) { .border-1px::after { transform: scaleY(0.33); } }
安全区域适配

适配iPhone X等带有刘海的机型。

/* 适配刘海屏 */ .safe-area-inset { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }

/* 底部固定导航适配 */ .fixed-bottom { position: fixed; bottom: 0; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); }
图片适配方案

针对不同分辨率设备的图片适配策略。

配合CSS的处理：

arduino 复制代码

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}

横屏适配处理

处理横屏模式下的布局适配。

/* 检测横屏 */ @media screen and (orientation: landscape) { .landscape-container { display: flex; flex-direction: row; } }

/* 检测竖屏 */ @media screen and (orientation: portrait) { .portrait-container { display: flex; flex-direction: column; } }

JavaScript监听屏幕旋转：

javascript 复制代码

window.addEventListener('orientationchange', function() {
    if (window.orientation === 180 || window.orientation === 0) {
        // 竖屏
        console.log('竖屏');
    }
    if (window.orientation === 90 || window.orientation === -90) {
        // 横屏
        console.log('横屏');
    }
});

软键盘弹出处理

处理软键盘弹出时的页面适配问题。

// 监听软键盘 const originalHeight = document.documentElement.clientHeight;

window.addEventListener('resize', () => { const currentHeight = document.documentElement.clientHeight; const input = document.activeElement;
css 复制代码
```
if (originalHeight > currentHeight) {
    // 软键盘弹出
    if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') {
        input.scrollIntoView({ block: 'center' });
    }
} else {
    // 软键盘收起
    window.scrollTo(0, 0);
}
```
});

CSS处理：

css 复制代码

/* 防止键盘顶起页面 */
.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

行业拓展

分享一个面向研发人群使用的前后端分离的低代码软件------JNPF。

基于 Java Boot/.Net Core双引擎，它适配国产化，支持主流数据库和操作系统，提供五十几种高频预制组件，内置了常用的后台管理系统使用场景和实用模版，通过简单的拖拉拽操作，开发者能够高效完成软件开发，提高开发效率，减少代码编写工作。

JNPF基于SpringBoot+Vue.js，提供了一个适合所有水平用户的低代码学习平台，无论是有经验的开发者还是编程新手，都可以在这里找到适合自己的学习路径。

此外，JNPF支持全源码交付，完全支持根据公司、项目需求、业务需求进行二次改造开发或内网部署，具备多角色门户、登录认证、组织管理、角色授权、表单设计、流程设计、页面配置、报表设计、门户配置、代码生成工具等开箱即用的在线服务。