移动端Web页面适配方案(整理版)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端Web页面适配方案(整理版)相关的知识,希望对你有一定的参考价值。

参考技术A

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

移动端web页面的开发,由于手机 屏幕尺寸 分辨率 不同,或者需要考虑 横竖屏 问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用 静态布局 ,通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备,即 <meta name = \'applicable-device\' content = \'mobile\'> ,在 <meta> 标签中的 viewport 标签中设置 width ,通过 js 动态修改标签的 initial-scale 使得页面等比缩放,刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位,这种方案实现简单,不存在兼容性问题,但用户体验很不友好。

后面出现 流式布局 ,使用百分比 % 定义宽度,高度使用 px 固定,根据可视区域大小实时进行尺寸调整,通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单,但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形,字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题,出现了 弹性布局 。这种布局方案下,包裹文字的元素的尺寸采用 em/rem 为单位,页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ,页面的主要划分区域使用 px 和百分比,包裹文字的元素和文字采用 em 。

上面的这几种方案下,页面元素的大小按照屏幕分辨率进行适配调整,但是整体布局不变,对于 响应式web设计 ,网页布局会随着访问它的视口及设备的不同呈现不同的样式,在实现上可能会以上多种方案的结合,同时搭配 媒体查询 技术使用,使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果,如 mashable 。

[TOC]

像素,是屏幕上显示数据的最基本的点,表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样,是因为像素点的个数相同情况下,不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字,在 1366×768 显示屏下会显示的小,在 1024×768 显示屏下会相对大。也称为 物理像素(设备像素 ),是分辨率的尺寸单位。

印刷行业常用单位,能够使用测量设备测得的长度,等于 1/72 英寸。

在不同屏幕上, css 像素呈现的物理尺寸一致,但 css 像素对应的物理像素具数不同。标准的显示密度下, 1 个 css 像素对应一个物理像素,缩放时, 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)

像素密度,每英寸所拥有的像素数。值越高,显示画面细节越丰富。计算公式为: ,其中 和 是分辨率的宽高, 是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个,值越高,图片越细腻。

设备物理像素和设备独立像素比 ,即 是指在理想布局宽度,使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取,css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

<meta> 标签中定义了一些元数据信息,通过设置 <meta name = "viewport"> ,提供有关 视口初始大小 的信息,供 移动设备 使用。属性值为

移动端涉及 布局视口 (Layout Viewport)、 视觉视口 (Visual ViewPort)和 理想视口 (Ideal ViewPort)。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的,屏幕每行的像素 * 每列的像素点数,单位是 px 。

设备独立的,软件可以达到的,个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

像素分辨率 ÷ 逻辑分辨率等于 倍率 ,如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素,如果在普通屏中其设备像素等于 css 像素,但在一些高清屏中,如 Retina 显示屏,一个css像素对应 2 或 3 个设备像素,这时显示出来的元素会变小。为了让元素如期待显示,需要传入 原始设计稿尺寸 × 倍率 的设计稿,根据 DPR 的定义,这样加载后能够达到同样的效果。

手机屏幕对角线长度换算成英寸的大小

贴上 源码 分析

视口 是浏览器中用于呈现网页的区域,移动端的视口通常指的是 布局视口

使用 css 预处理器把设计稿尺寸转换为 vw 单位,包括 文本 布局高宽 间距 等,使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准,转化的计算表示为

响应式设计 使得一个网站同时适配 多种设备 多个屏幕 ,让网站的布局和功能随用户的使用环境(屏幕大小、输出方式、设备/浏览器能力而变化),使其视觉合理,交互方式符合习惯。如使得内容区块可伸缩与自由排布,边距适应页面尺寸,图片适应比例变化,能够自动隐藏/部分显示内容,能自动折叠导航和菜单。

移动端web开发主流方案选择

本篇目录

一、移动端主流方案

单独制作移动端页面(主流)

响应式页面兼容移动端(其次)

二、单独移动端页面(主流)

三、响应式兼容PC移动端

四、总结

五、往期笔记回顾直达车


一、移动端主流方案

单独制作移动端页面(主流)

京东商城手机版

淘宝触屏版

苏宁易购手机版

响应式页面兼容移动端(其次)

三星手机官网

二、单独移动端页面(主流)

通常情况下,网址域名前面加 m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面

三、响应式兼容PC移动端

三星电子官网:http://www.samsung.com/cn/,通过判断屏幕宽度来改变样式,以适应不同终端

缺点:制作麻烦,需要用很大精力去调兼容性问题

四、总结

现在市场常见的移动端开发有 单独制作移动端页面 和 响应式页面 两种方案

现在市场主流的选择还是单独制作移动端页面

五、往期笔记回顾直达车
 


2022年前端学习路线图:课程、源码、笔记,技术栈
欢迎小伙伴们留言哦,期待看到大家的进步。另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我。

 

以上是关于移动端Web页面适配方案(整理版)的主要内容,如果未能解决你的问题,请参考以下文章

移动web——移动开发选择和技术解决方案

移动端web开发主流方案选择

移动端web自适应适配布局解决方案

移动端H5页面适配问题研究

Vue 项目中的移动端适配方案

移动端适配方案-rem(基础篇)