- 综合排序
- 最热优先
- 最新优先
跨端开发实践：多端适配指南
跨端开发实践：多端适配指南 1. 引言 随着移动互联网的快速发展，企业需要在多个平台上提供一致的用户体验。传统的原生开发方式虽然性能优异，但开发成本高、维护困难。 跨端开发技术应运而生，让开发者能够"一次编写，多端运行"，大大提高了开发效率。 本文将深入探讨 uni-app 和 Taro 两个主流跨端开发框架的多端适配实践，为前端开发者提供实用的指导和建议。 跨端开发概述 2.1 什么是跨端开发 跨端开发是指使用一套代码，通过不同的编译工具和运行时环境，在多个平台上运行的开发方式。 Taro 跨端开发实践 4.1 框架特点 Taro 是京东推出的跨端开发框架，具有以下特点： React/Vue 语法：支持 React 和 Vue 两种开发方式 TypeScript 支持：原生支持 本文介绍了 uni-app 和 Taro 两个主流跨端开发框架的实践经验，希望能为前端开发者在跨端开发的道路上提供有价值的参考。
53110编辑于 2025-12-15- 来自专栏十月梦想
移动端适配之viewport适配
前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧! 首先我们可以获取到当前设备的独立像素(window.screen.width),然后通过适配的像素比(dpr)还原其真实逻辑像素(物理像素),然后在其还原后的设备像素上进行适配. 那么这个viewport适配有什么问题呢? (比例缩放时候讲过),尽管这样,也算尽量尽可能的去适配!随后继续介绍较为完美的rem布局适配方案!淘宝的布局方案,也算此种方式!不过适配的是dpr2.0的!
1.3K10发布于 2018-08-29 - 来自专栏超超不会飞
移动端适配
实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。 方法1：媒体查询 这是最笨工作量最大的方法了，就是一个屏幕尺寸一个屏幕尺寸的适配，当然你没办法适配到所有的手机型号，有的手机比较奇葩，同样是5.5寸，有的矮胖，有的瘦高。 我的方法是以iphone6为准，然后向上适配5.5寸，向下适配4.7的iphone5，这个时候就能自适应市场上的一些主流屏幕，然后在对其他品牌手机挑一部分手动适配。 在很早之前找解决方案的时候就看到这篇文章了——使用Flexible实现手淘H5页面的终端适配。 简单讲就是用 js 动态改变 <meta> 标签，然后用rem作为单位，因为rem就是根据font-size来做计算的，由此对不同屏幕尺寸进行适配。 神器。以后的项目应该都会使用这个方案。
2.7K20发布于 2020-09-18 - 来自专栏十月梦想
移动端适配之比例缩放适配
前面一篇简单介绍了适配的方案(百分比适配),对于百分比的适配也是挺多问题,这次介绍一下viewport适配方案! 适配的思想呢? 就是比如ip6的设备独立像素(375px),这个设备独立像素介绍移动端时候说过可以使用缩放进行改变! 此时我们可以将所有的设备的独立设备像素转为375px(ip6的),然后进行渲染适配,在375px上就行布局! 那么这个比例缩放适配存在什么问题呢? 但是750px的图像等,在原始独立像素大于414的设备可能出现图像失真等问题,后面会详细介绍一下移动端终极适配方案rem适配 本博客所有文章如无特别注明均为原创。 原文地址《移动端适配之比例缩放适配》 分享到：更多 标签: 移动端适配 比例缩放适配
1.6K30发布于 2018-08-29 - 来自专栏IMWeb前端团队
移动端适配大法
一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格 ，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法： 一、百分比 使用场景：只要求宽度随屏幕自适应 ，比如文字块 百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。 三、媒体查询 使用场景：一般利用媒体查询来进行特殊处理，比如 1、iphoneX这类全屏的适配 2、在适配dpr为3的iPhone Plus或者pad横屏等超级大屏时，需要根据业务需求设置临界值，然后展示不同内容或者替换不同分辨率图片
3.2K20发布于 2019-12-03 - 来自专栏十月梦想
移动端适配之终极适配方案rem适配
前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题! 这次这个rem终极适配方案,是目前移动端的较为完美的适配方案! 简单介绍一下这个rem适配 px 固定值,设置多少就是多少不随屏幕大小改变 em 相对于自身字体大小 font-size:12px; 1em=12px em引发问题 1.chrome浏览器下规定字体最小 html)字体设置 html{ font-size:12px; } 1rem=12px,5rem=60px; 首先要去设置这个html(根节点的字体大小),rem是根据这个根节点的字体大小进行适配 当然去适配的时候这个根节点的大小如何设置才能更好适配呢?
2K20发布于 2018-08-29 - 来自专栏生如夏花绚烂
探讨移动端适配
在探讨移动端适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。 所以，有如下公式： DPR = 设备像素/CSS像素 了解上面的东西后接下来我们来探讨移动端的适配问题 注意在不同的屏幕，单位像素的大小是不同的，像素越小屏幕越清晰，智能手机的像素点是远远小于显示器的像素点的 这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好 这也就是我们常说的布局视口 完美视口（理想视口） 默认情况下 移动端的像素比为 980/移动端宽度 布局视口带来的问题是 如果我们直接在网页中编写移动端代码，在980的视口下像素比是非常不友好的 也就是 1px =0.几物理像素，这样就会导致网页中的内容非常非常小 因此在编写移动端页面时 ==设备宽度===完美视口） initial-scale：初始缩放比 maximum-scale：最大缩放比 minimum-scale：最小缩放比 user-scalable 用户是否可以缩放 移动端布局适配解决方案
2.2K10编辑于 2022-09-08 - 来自专栏小鑫の随笔
web移动端适配之rem适配原理
!function(window, document) { function setSize() { // 设备宽度 let deviceWidth = window.screen.width; // 设计稿宽度 const baseValue = 750; // html的字体大小 = (设备宽度 / 设计稿宽度) * 100 document.documentElement.style.fontSiz
1.4K50编辑于 2022-02-25 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 ，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。
2K40编辑于 2021-11-30 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 ，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。
1.7K40发布于 2021-09-30 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 ，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。
2.9K40发布于 2021-10-01 - 来自专栏HTML5学堂
pageResponse - 移动端适配框架
HTML5学堂：移动端布局一直都是一个问题，各种各样的分辨率使得移动端的布局需要耗费大量的时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。 通常移动端的布局方式 1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用 2、固定像素设固定视口宽度。 结束语 移动端有很多做法，对于我来说之前提到的三种常用的方法我都用过，而他们经常是结合着用，单独的存在往往不能够满足需求，就拿一个简单的例子来说 main footer 竖屏的时候你希望footer在底部 移动端看似简单，布局上却有非常多的细节问题。因此多学多思考，学如逆水行舟，不进则退。希望大家能多对比多思考，方法总有优缺点，懂得如何互助互补才是关键。 案例和资源 详细案例和js下载，可查看文章——>pageResponse - 让H5适配移动设备全家，小编在书写本文时也查看了这篇文章，感觉还是可以的，也很感谢该作者的分享。
1.3K60发布于 2018-03-12 - 来自专栏Dimples开发记
移动端适配vw方案
# 1、前言 设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。 基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。 举个例子。 # 3、适配代码 假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。 <! viewport缩放方案 适配原理简单 需要使用JS 直接使用设计稿标注无需换算 方案死板只能实现页面级别整体缩放 动态REM方案 适配原理稍复杂 需要使用JS 设计稿标注的px换算到CSS的rem 计算简单 方案灵活技能实现整体缩放又能实现局部不缩放 vw方案 适配原理简单 不需要JS即可适配 设计稿标注的px换算到CSS的vw计算复杂 方案灵活技能实现整体缩放又能实现局部不缩放
1.4K20编辑于 2022-12-21 - 来自专栏WflynnWeb
移动端适配终极封装
var adaptive = {}; (function (win, lib) { var doc = win.document; var docEl = doc.documentElement; var devicePixelRatio = win.devicePixelRatio; var dpr = 1; var scale = 1; function setViewport() { var isIPhone = /iphone/gi.
70640编辑于 2022-10-28 - 来自专栏zjblog
网页自适配手机端
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。 之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。 = -1) { isMobile = true; alert("本博客手机打开不适配，建议使用电脑访问效果最佳！ css最烦的就是调来调去还差点的，特别是屏幕宽度，就很无语~ 手机适配的话先加个meta viewport。 移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素 首页： 详情页： 做了适配之后的效果 首页： 详情页：
3.6K30编辑于 2022-06-21 - 来自专栏前端之路
移动端适配iPhoneX方案
移动端适配iPhoneX方案 对页面进行iPhoneX适配处理教程 在viewport 中添加 viewport-fit=cover 属性 <meta name="viewport" content=" 一般我们只希望 iPhoneX <em>适配</em>样式，可以配合 @supports 进行css条件判断使用样式： 12345 @supports (bottom: constant(safe-area-inset-bottom margin-bottom: constant(safe-area-inset-bottom); } } ---- 拓展阅读 iPhone X的Web设计 这里总结了大家iOS 11，iPhone X <em>适配</em>问题
1.3K50发布于 2018-07-17 - 来自专栏编程微刊
跨端框架盘点
1：Electron Electron这个玩意简直是做团队内部工具的利器，也是前端老手秒上手的东西，可以给团队做些玩意了，桌面端追求开发速度用Electron 使用 JavaScript, HTML 3：Flutter -跨端解决方案 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，前端对于 Flutter 的热忱度之高一度让人有点惊讶，事实上在 Flutter 社区内见到的客户端开发者远多于前端开发，不过前端对于跨端解决方案确实有着天然的渴求。 使用WEB开发技术（HTML5、CSS3、JavaScript）进行跨平台开发。 ), 也就是说开发一套代码可以实现相应端的开发，是基于Vue的一个很不错的开发框架，对于熟悉Vue 和微信小程序的开发小伙伴来说学习成本几乎为零。
1.1K10发布于 2019-04-18 《跨端互联进阶实践指南：从链路适配到长期效能的维护方案》
设备能力的差异化是跨端互联的另一大核心痛点，PC的高性能运算、移动端的便携性、主机的沉浸式体验，决定了不同终端的硬件算力、屏幕尺寸、交互方式存在本质差异，如何让同一套游戏逻辑在不同设备上实现“效能适配” 长期实践总结出，解决这一问题的核心是“分层设计+能力适配”，即构建“核心逻辑层+设备适配层”的架构，核心逻辑层封装游戏的核心玩法、数据规则、协同机制，确保跨端数据的一致性，这一层是跨端互联的基石，不随设备变化而改动 动态场景下的协同逻辑适配，是跨端互联中容易被忽视但至关重要的环节。 为应对这一挑战，我们建立了“互联效能监测与优化体系”，通过实时监测关键指标、定期进行全面检测、动态迭代适配策略，确保跨端互联的长期稳定。 首先，构建“效能监测指标库”，涵盖数据同步成功率、跨端响应延迟均值、设备适配兼容率、场景协同流畅度、玩家投诉率等核心指标，为每个指标设定预警阈值—比如跨端响应延迟均值超过50ms、设备适配兼容率低于95%
26910编辑于 2025-11-22- 来自专栏十月梦想
移动端适配之百分比适配
前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案! 今天介绍的是百分比适配,顾名思义,就是宽度使用百分比进行替代传统的具体像素适配! 接下来看一下百分比适配的问题 优缺点： 1.百分比不好计算 2.需要确定父级的宽度,百分比依照父级计算 3.宽度可以很好适配，高度无法确定， 4.可能会使形状严重改变！ DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百分比移动端适配</title> <meta name="viewport 那么这个百分比<em>适配</em>存在什么必要,通常百分比<em>适配</em>结合其他的<em>适配</em>方案(例如viewport<em>适配</em>以及移动<em>适配</em>方案终极方式rem<em>适配</em>,稍后文章会详细介绍)
77330发布于 2018-08-29 - 来自专栏青梅煮码
vue项目移动端、pc端适配方案
vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度，自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。 font-size: 18px; line-height: 64px; } } 2、简单来讲阿里手淘的原理就是网页随着屏幕大小等比例缩放而已，所以此方案只适用于纯手机端或者 pc端的适配方案，当然手机端、pc端也可以同时适配，前提是页面布局不变。 一般而言，手机端、pc端共用一个项目还是建议使用栅格布局、媒体查询控制。 六、参考 vue中使用rem布局解析+大屏自适应 基于vue cli3的移动端适配问题
4.7K30编辑于 2023-03-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号