【DAY46】移动端适配

最新推荐文章于 2025-03-13 20:01:44 发布

qq_42775808

最新推荐文章于 2025-03-13 20:01:44 发布

阅读量1.2k

点赞数

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_42775808/article/details/130439005

版权

Vue 的移动端适配主要涉及两个方面：屏幕适配和样式适配。

屏幕适配：移动设备的屏幕分辨率和物理像素密度（PPI）各不相同，为了让页面在不同的设备上具有一致的显示效果，需要进行屏幕适配。一般使用的方法是设置 meta 标签的 viewport 属性，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中，width=device-width 指定了 viewport 的宽度等于设备的宽度，适配不同分辨率的设备；initial-scale=1.0 指定了页面的初始缩放程度为 1，避免在加载页面时出现自动缩放的现象。

样式适配：移动设备的屏幕尺寸、分辨率、PPI 及浏览器标准化的 CSS 解析等因素，也会导致样式在不同设备上的显示效果不同。为了解决这个问题，在样式中可以使用相对单位来规定元素的大小。

常用的相对单位有：

rem：相对于根元素的字体大小（html 元素的 font-size）来计算的值；
vw、vh：相对于视口宽度和高度的百分比来计算的值；
%：相对于父元素的百分比来计算的值；

为了更好地适配移动端，可以使用 SCSS 或者 Less 等 CSS 预处理工具来实现对不同分辨率的自适应处理，同时使用基于 rem 单位的 CSS 框架（如 Vant）可以方便地处理样式适配问题。

除此之外，还可以通过引入不同的样式文件来适配不同的设备。（如引入 m.css、ipad.css 等文件来区分不同设备类型）

媒体查询：使用 CSS3 中的媒体查询可以根据屏幕分辨率、设备类型等条件来针对不同的设备和分辨率使用不同的样式。
矢量图标：使用矢量图标代替传统的图片元素可以避免因不同分辨率而导致的切图问题。
图片适配：使用 srcset 和 sizes 属性可以实现根据屏幕分辨率选择最佳的图片，避免图片尺寸过大导致页面加载缓慢。
WebP 图片格式：WebP 图片格式具有更高的压缩率和更小的文件大小，可以更快地加载图片，提高页面性能。
避免使用 touchstart 等移动专用事件：在移动设备上，click 在触摸屏幕一定时间后才会触发，而 touchstart 事件则会立即触发，在交互行为上会有差异。
Flexible.js：该方案使用 JS 动态计算 html 节点的字体大小，从而实现根据不同设备自适应调整缩放比例的效果。
vw、vh、vmin、vmax 等视口单位：使用这些视口单位可以根据 viewport 的宽度和高度进行百分比计算，使元素相对于视口尺寸自适应调整。
postcss-px-to-viewport：这是一个 PostCSS 插件，可以将 px 单位自动转换为 vw 或 vh 等视口单位，从而使样式更好地适应移动端设备。
cssrem：设置一个基准值，根据这个基准值自动计算出每个 px 对应的 rem 值，从而使得不同设备下的自适应更为方便。
避免使用固定宽度和高度：固定的尺寸很难适应不同尺寸的屏幕，在样式中应该尽量使用百分比、弹性布局等自适应的方法。
优化字体：移动设备屏幕尺寸较小，字体大小和样式对整体效果影响很大，应当优化字体，使用较大的字号和简洁的字体样式。
简化页面元素：移动设备的屏幕空间有限，页面上的元素数量应当尽量减少，保持简洁，避免过多的插图和广告。
使用 CSS3 动画代替 JS 动画：CSS3 动画效果耗费资源较少，同时优化后的 CSS3 动画效果可以提高页面的交互性。
测试和调试：为了使页面在各种设备和浏览器中都有良好的显示效果，需要在调试时使用多个不同大小和像素密度的设备进行测试，借助工具如 Chrome 的 DevTools 对样式进行调试和优化。
引入 polyfill 插件：移动设备的浏览器支持度较低，某些新特性可能无法使用，可以引入 polyfill 插件对低版本的浏览器提供相应的 API 支持。
避免使用不必要的插件和框架：在移动端环境中运行时，插件和框架的额外加载和处理会增加页面的负载和加载时间，影响页面的性能和用户体验。
使用 CDN：将页面的静态资源（如 CSS、JS、图片等）托管到 CDN 上，可以提高页面的加载速度和容量，避免过多的带宽消耗。
为图片添加 lazyload 属性：假如页面中存在很多大图，可以使用 lazyload 属性将图片的加载推迟到其将要进入可视区域之前，实现按需加载，节省页面高质量图的空间和带宽消耗。
压缩代码：对 CSS、JS、 HTML 文件和图片等资源进行压缩，可以减小文件的体积，加速文件的加载速度。
考虑不同屏幕方向：在页面设计和布局时，考虑到移动端设备在不同方向（如横屏和竖屏）下的屏幕尺寸和分辨率，使页面在横屏和竖屏时都有良好的展示效果。
考虑设备特性和交互方式：不同设备具有不同特性（如支持情况，触碰方式），在设计交互效果时应根据设备特点来选择合适的方式。
优化页面加载速度：针对移动网络环境较差的情况，需要尽可能减少页面加载的时间，例如合并、压缩代码、使用图片延迟加载等。
考虑不同移动操作系统：移动操作系统的支持情况和特点有差异，需要在代码编写过程中留意，避免与某些操作系统或版本不兼容的情况。
使用移动端专属 API：移动端浏览器具有许多专门针对移动设备开发的 API（如获取地理位置、相机等），可以更好地发挥移动设备的优势。
测试应用性能：在开发、测试移动端应用时应该借助专门的工具（如 Android Studio 或 Xcode 等）对应用的性能现状进行测试和分析，以了解应用的高峰时刻、内存使用等信息，从而优化应用的性能。
避免过度定制界面：过多的自定义样式和交互可能导致用户操作体验的不稳定性，应优先使用移动端原生控件，尽可能使应用与系统风格一致。
考虑设备的内存使用：移动设备的内存容量比较有限，需要在应用开发时对内存使用进行优化，避免因过多的内存占用导致应用崩溃。
采用响应式布局：响应式布局是一种能够适应不同尺寸和分辨率的屏幕的设计方式，可以使页面在不同尺寸和分辨率的设备上都有良好的显示效果。
使用 HTML5 在线存储：使用 HTML5 在线存储（如 localStorage 和 sessionStorage），可以将数据保存在本地，同时缓解服务器请求的压力，提高应用性能。
尽可能避免使用 Flash 和其他不受支持的技术：移动设备通常不支持 Flash 和其他旧技术，使用这些技术可能会导致应用的兼容性问题，需要尽可能避免使用
对样式单位选择更为谨慎: 在移动端适配中，使用 rem 和 em 单位可以让页面根据不同设备屏幕宽度自适应调整，而使用 px 则可能导致页面在不同分辨率设备上呈现效果不佳的问题。
优化图片资源: 在移动网络的环境下，图片资源的下载量和下载速度会成为页面的瓶颈，因此在设计和制作页面时需要对图片的分辨率、格式、大小等方面进行优化。
注意文本大小和字体限制: 在手机设备上显示的文本大小相对于桌面设备要小得多，因此应当特别注意文字大小和排列方式，保证在不丧失可读性的情况下进行一定的压缩，同时还要注意不要使用过多的字体，以避免速度变慢或者产生不必要的内存占用。
避免使用缩放和重定向：针对不同设备，切勿使用缩放和重定向来适配页面，因为它们都会影响页面加载速度和用户体验。
关注安全和隐私保护: 在移动应用开发中，需要对个人隐私和数据安全进行保护，确保应用的信息流和存储都是安全可靠的。
开启 Gzip 压缩：使用 Gzip 压缩可以大幅度缩减传输的数据量，从而提高移动端的加载速度，提升用户体验。
使用外部样式和脚本：尽可能地减少内联样式和脚本的使用，将它们放到外部文件中，可以减轻页面体积，提高移动端的加载速度。
优化移动端页面布局：需要针对在移动设备上的使用习惯和特点，进行页面布局的优化，避免出现点击误触等问题。
使用响应式图片：通过使用响应式图片的技术，可以根据设备屏幕大小和分辨率的不同，选择不同分辨率和大小的图片，以提高页面的显示效果和显示速度。
使用基于 Web 的移动应用（web app）：采用基于 Web 技术开发的移动应用，可以大量减少设备上的安装和更新工作，同时减少设备的内存占用，提高应用的性能。
精简 DOM 结构：DOM 结构越复杂，页面渲染时间就越长，因此需要尽可能精简页面中的 DOM 结构，减少不必要的元素和属性，以提高页面的响应速度。
避免不必要的网络请求：移动端网络资源受限，网络请求次数越多，页面加载时间就越长，因此需要尽可能避免不必要的网络请求。
优化移动端用户交互体验：在移动端适配中，优化用户交互体验非常重要，例如可以采用 Tab 视图、滑动切换等方式来提高用户体验。
避免使用过于复杂的动画和特效：在移动端，复杂的动画和页面特效会影响页面加载速度，并且可能导致设备性能下降
优化移动端输入体验：在移动设备上，通过使用合理的输入控件和对输入过程的优化，可以提高用户输入效率和准确性，增强用户体验。
建议使用原生元素：使用原生元素（native elements），如 HTML5 中提供的输入框、下拉菜单等，可以充分利用设备资源和功能，提供更好的用户体验
移动端性能优化工具: 可以使用一些性能优化工具，如 Google 的 PageSpeed Insights 工具、Webpack、Gulp等，让网站的性能提升到更高的水平。
使用较轻量的第三方库和插件：在移动端适配中，需要特别注意使用第三方库和插件的大小和性能，尽量选择较轻量的资源，以避免过多的网络请求和页面加载时间过长。
关注移动端SEO：不同设备上的SEO考虑因素会有所不同，需要注意了解和关注移动端SEO排名的特点和优化方法。
异步加载资源：异步加载资源可以减少页面加载时间，提高页面性能。例如，采用异步加载 JavaScript 脚本等资源。
采用 HTTP/2 协议：HTTP/2 协议可以大幅度提升页面加载速度，减少网络请求次数，提高页面性能。
减少 HTTP 请求：在移动端适配中，可以尽量减少页面的 HTTP 请求次数，避免过多的网络请求和页面加载时间的过长。
按需加载 JS 和 CSS：可以将 JS 和 CSS 文件分解成多个较小的文件，然后按需加载，提高页面的加载速度和性能。
使用 Web Workers：通过使用 Web Workers，可以将一些计算密集型的任务放到后台线程中进行处理，从而减少主线程被阻塞的情况，提高页面性能。
多使用轻量级框架：移动端的 JavaScript 库往往比较重，可以选择一些轻量级的框架，例如 Zepto、Stencil 和 F7 等，可以提高页面性能。
使用 Progressive Web App（PWA）技术（离线支持）：PWA 可以将 Web 应用转换成类似原生应用的形式，具有离线可访问、快速加载等特性，可以大幅度提高移动端页面的用户体验。
采用 AMP 技术：AMP（Accelerated Mobile Pages）技术是一种优化移动端性能的技术，可以减少页面加载时间和提高页面的可用性。除了在 Chrome，Safari 和 Firefox 等主流浏览器中支持外，还可以在微信、百度等 App 中支持。
采用 WebRTC 技术：WebRTC 可以在浏览器中实现实时音视频通信，为一些移动端应用提供了更好的用户体验。
优化页面渲染流程：通过优化页面渲染流程，如减少重排和重绘、设置最小宽度等，可以提高页面性能和用户体验。
适当使用 WebAssembly：WebAssembly 是一种新的 Web 技术，可以将 C、C++、Rust 等编程语言编写的程序编译成二进制文件，在浏览器中运行。通过使用 WebAssembly，可以将一些计算密集型的任务放到前端，大幅度提高页面性能和用户体验。
采用 SSR 技术：SSR（Server-Side Rendering）技术是一种将服务器端的 HTML 直接返回给客户端的技术，可以大幅度减少客户端的计算量和页面的加载时间。
采用 Hybrid 技术：Hybrid 技术是将 Web 技术和原生技术结合起来的一种技术，可以在保证 Web 技术的优势的同时，实现更好的用户体验。
采用 P2P 技术：采用 P2P 技术可以减少服务器的负载，加快页面的加载速度，提高用户体验。
采用 Serverless 架构（微服务架构）：Serverless 架构可以将应用程序的后端逻辑和数据存储与云服务平台中的 FaaS、BaaS、存储服务等组件结合起来，减少服务器的管理和运维成本，从而提高页面性能和用户体验。
使用 Android 和 iOS SDK：Google 和 Apple 都提供了自己的 Android 和 iOS SDK，开发者可以使用这些 SDK 来优化自己的应用程序，提高用户体验。
使用深色主题（电池友好型设计）：在移动设备的屏幕上使用深色主题可以减少屏幕的发射，从而降低功耗和延长电池寿命。

参与社区和开源项目：参与相关的社区和开源项目可以帮助开发者快速了解和应用新技术，同时还可以获得来自其他开发者的帮助和建议。
优秀的文档设计：应用程序的文档化设计可以帮助开发者更好地了解程序细节，尤其是对于新开发者来说，这非常重要。应该采用最佳实践来描述工作原理，包括关键接口，如果需要发布文档版本等方面。
敏捷开发：采用敏捷开发原则，或者一些灵活的开发方法，能够使开发人员根据实际需求进行快速迭代并快速实现部署。
持续集成和自动化测试：采用持续集成和自动化测试的实践可以降低出错风险和增加开发的效率和稳健性。
自动部署和容器技术：采用自动部署和容器技术来管理应用的生命周长，从而提高应用程序的可靠性和可扩展性。

除了上述方法，还可以考虑以下一些措施：

渐进式Web应用（Progressive Web Apps, PWA）：PWA结合了Web应用和原生应用的优点，旨在提供快速、可靠、具有本地应用程序的体验。具体来说，这意味着采用离线缓存、快速启动、推送通知等技术，可以提供类似原生应用的交互性和用户体验。
增加社交化元素：社交化元素可以增强应用和用户之间的互动和社交性，例如，向用户提供社交分享和互动方案，像活动、打赏、礼物等。这些功能可以吸引新用户，同时也可以提高用户的满意度、忠诚度及使用频率等。
定制化推荐和个性化体验：通过采用基于人工智能和机器学习的算法，开发者可以为用户提供更具精度和重要性的推荐和建议。例如，在金融应用中，推荐理财产品和服务需基于每个用户的投资习惯和风险偏好。
引入区块链技术：区块链技术可以提高数据安全性和用户信用度，例如，使用分布式账本技术，可以保证数据的可靠性，从而提高应用程序的安全性和诚信度。
集成增强的AR和VR特性：随着AR和VR技术的持续进步，将先进的增强现实和虚拟现实技术与移动端应用程序结合在一起，将会增强用户体验和技术创新。例如，在娱乐、游戏和教育领域中，增强现实和虚拟现实技术可以提供更加沉浸式的体验，从而为用户提供更加优质的内容。

综上所述，移动端应用程序的发展方向，需要结合多种技术和工具，考虑到用户需求和服务提供的价值，还要考虑到开发人员的效率和程序稳健性。新兴技术和趋势的不断发展，对于开发者而言需要持续关注和学习，以及应用最佳实践，打造高品质和高性能的移动应用程序。

人工智能：人工智能技术可以广泛应用于移动端应用程序，如语音识别、自然语言处理、图像识别、智能问答等。例如，在智能助手应用中，用户可以通过语音指令控制应用程序，并进行智能交流。
现代化架构：现代化架构可以提高移动应用程序的可融合性、验证性和轻巧性，如微服务架构、容器化等。这些架构可以提高应用程序的灵活性和可扩展性。
量子计算：量子计算是一种新的计算范式，对于处理大规模数据和复杂高要求的计算有天然的优势。目前量子计算还处于发展阶段，但未来有望为移动应用程序和开发者带来更多的创新和独特的价值。
虚拟化和云计算：虚拟化和云计算技术可以帮助移动应用程序提高效率和可扩展性，减少开发者的硬件和软件成本。例如，在视频应用中，采用云端视频编码服务，可以提高视频上传和处理的速度，降低移动设备的性能要求。
IoT技术：IoT技术可以将移动端应用程序与物联网设备融合，为用户提供更加智能化的服务，例如在智能家居应用中，用户可以通过移动应用程序控制家庭设备，并解决家居生活中的问题。
聚合应用程序：聚合应用程序是指将多个应用程序集成到一个统一的较大的应用程序之中，使用户可以更方便、更高效地访问多个应用。例如，在购物应用程序中，可以整合外卖、支付等多个应用程序，以提供一站式服务。

CSS知识：

rem

rem 属于相对单位，它是指相对根元素的字体大小。在 html 元素中设置 font-size，然后在其他元素中使用 rem 单位，可以根据根元素的字体大小自动适应。例如，当 font-size 为 16px 时，1rem 将等于 16px。

vw、vh：

vw 和 vh 属于视口单位，它们分别表示视口宽度和高度的百分比。如果视口宽度为 1000px，那么 1vw 将等于 10px，即 1% 的 1000px。

媒体查询（Media query）是 CSS3 中的一个功能，用于根据设备特征（如设备宽度、高度、方向、分辨率等）针对不同屏幕尺寸定义不同的 CSS 样式。可以通过媒体查询来实现响应式设计，使网页在不同尺寸和设备上都有良好的用户体验。

媒体查询的语法通常包括 @media 关键字和一个用于规定条件的媒体类型及其对应的条件表达式，例如：

@media (min-width: 768px) {
  /* CSS styles for screens wider than 768px */
}

在这个例子中，我们使用了 min-width 属性，定义了一个条件表达式，仅在屏幕宽度大于 768px 时应用 CSS 样式。

媒体查询是使用在网页的样式表中的，通常在样式表的开始处定义。如果未满足媒体查询的条件，该查询内的样式表将被忽略。因此，您可以使用媒体查询来根据用户使用的设备或屏幕宽度等因素选择合适的样式表。

除了屏幕尺寸，媒体查询还可以用于检测其他特性，例如设备的屏幕方向、颜色深度等。具体来说，现代设备和浏览器支持以下媒体查询特性：

width 和 height：设备宽度和高度
min-width 和 max-width：设备最小宽度和最大宽度
min-height 和 max-height：设备最小高度和最大高度
aspect-ratio：设备的宽高比
orientation：设备的屏幕方向（横向或纵向）
resolution：设备的分辨率
color 和 color-index：设备的颜色数和颜色索引

综上所述，媒体查询是一种能够帮助我们根据设备特征对 CSS 样式进行有针对性的规则定义，以实现网页的响应式设计。通过合理的媒体查询定义，可以提高网页的用户体验，让网站在不同屏幕和设备上都能够呈现出最佳的效果。

移动端：native 和web

Native 应用程序是专门针对特定移动设备操作系统（如 iOS 或 Android）编写的应用程序，通常使用操作系统原生 API 和工具包进行开发。Native 应用程序可以通过应用商店或应用程序市场下载和安装。它们通常具有更快的性能，并且可以利用设备的硬件功能（如摄像头和传感器）。

Web 应用程序是访问 Web 页面的应用程序，可以使用网络浏览器或 Web 视图打开。Web 应用程序基于网站技术，如 HTML、CSS 和 JavaScript，因此它们可以在多个操作系统和设备上运行。Web 应用程序具有更广泛的适用性，并且可以通过网络进行更新和维护，因此更加方便。

混合开发

混合开发（Hybrid development）是指将 Web 技术和 Native 技术相结合开发移动应用程序，以利用 Web 技术的跨平台优势和 Native 技术的性能和交互体验优势。混合开发将 HTML、CSS 和 JavaScript 等 Web 端技术与原生移动应用程序开发技术相结合，通过 WebView（Web 视图）将 Web 应用嵌入到原生容器中，并通过桥接技术使得 Web 和 Native 之间可以进行通信和交互，并在应用市场上发布。

混合开发具有以下优点：

跨平台：混合开发可以使用 Web 技术开发跨平台应用程序，减少了开发成本和维护难度。
使用 Native 功能：混合应用可以使用 Native 功能，并且具有更高的性能和用户体验。
高效快速开发和迭代：以 Web 开发技术来实现，更加灵活，快速的调试和集成。
通用性和更好的可维护性：使用 Web 技术的混合开发可以促进应用程序的代码重用，提高了应用的可维护性。

混合开发的技术有多种选择，包括传统的基于 Cordova 和 PhoneGap 的 Web 技术和 Native 技术桥接开发方式、React Native 等 JavaScript 框架的混合开发、Flutter 等跨平台框架等等。近年来，随着 PWA（Progressive Web Apps）等新技术的不断发展和成熟，混合开发也正在发展出更多新的变体并不断向前。