移动端Web页面适配方案（整理版）

@(概述)[基本概念|百分比|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 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了 d性布局 。这种布局方案下，包裹文字的元素的尺寸采用 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中通过 windowdevicePixelRatio 获取，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 设计稿为基准，转化的计算表示为

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

主要是用来加载网页的

如果你做浏览器相关的应用，肯定要使用webview还有就是，如果你访问自己的网页，可以使用Webview，通过webview能与JS互动，这样你就可以实现手机与网页的时时互动了。

每个独立的进程都能分配独立的内存，这样的话，你的app可以获得双倍的内存，其中一半给Webview吃。增大Webview获得的内存，变相的减小内存泄露产生OOM的概率。

Webview发生崩溃时不会导致app闪退，就像第二点说的，因为Webview是在独立进程中，如果发生崩溃，主进程还安然无事，app还在运行中，没有闪退，不闪的才是健康的。

WebKit是Mac OS X v103及以上版本所包含的软件框架（对v1027及以上版本也可通过软件更新获取）。

同时，WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目，主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。

传统上，WebKit包含一个网页引擎WebCore和一个脚本引擎JavaScriptCore，它们分别对应的是KDE的KHTML和KJS。

扩展资料：

hybrid app

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app，兼具"Native App良好用户交互体验的优势"和"Web App跨平台开发的优势"。

"云"时代的来临正在改变App和运营团队之间的关系，一场不能避免的变革正在进行。

鉴于移动终端的局限性，移动终端上的APP由本地化应用(Native App)，到混合型应用(Hybrid APP)，再到基于WEB的应用Web App，这一连串的变化都源于技术的更新和市场的需要。

Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。

再彻底一点的，如掌上百度和淘宝客户端Android版，走的也是Hybrid App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。

汽车有混合动力Hybrid，移动应用同样也有混合模式。Hybrid App(混合模式移动应用)兼具"Native App良好用户交互体验的优势"和"Web App跨平台开发的优势"。

很多人不知道市场上一些主流移动应用都是基于Hybrid App的方式开发，比如国外有Facebook、国内有百度搜索等。

国内外Hybrid App的开发框架众多。如何选择又成为一个难题。下面对开发者比较关心的集中知名跨平台开发移动应用中间件进行列表和对比，以便选择最适合您的移动应用中间件。

PhoneGap是相对比较早进入公众视线的一种选择。但是，开发者简单的基于PhoneGap来开发移动应用肯定会发现结果和Web App比较差的用户体验类似。

这也是为什么基于PhoneGap有实用性的移动应用主要集中在iOS上。可是PhoneGap这种现状弱化了HTML5的跨平台价值。

Titanium是一种基于翻译机制的跨平台中间件，能够开发出具有Native体验的移动应用，但是因为翻译机制的限制导致移动应用开发不能像真正的HTML5开发一样灵活。哪怕一个按钮也不能像普通HTML一样来编写，而必须按照Titanium约定的特定格式。

Salama是全新研发的一套Hybrid APP和云端服务整合的开发套件。在终端，一共有三种开发模式:高度混合模式、JS模式和低度混合模式。在低度混合模式下，需要追求终端速度和显示效果的开发者，可以在不改变原有的构架思路的前提下进行开发。

在JS模式下，所有的画面显示及业务逻辑均由JS程序实现，对于原来的基于WEB的开发者，只要熟悉JS、CSS、HTML的前端工程师就可以轻松构建自己的应用。

在高度混合模式下，原生和HTML5可以随意组合，可以为开发者在进行大型商业软件开发的过程中提供最高的性价比。不仅如此，在云端Salama还提供了一整套云服务，涵盖了业务处理、数据库 *** 作、文件等资源的存储分发等服务。

Salama已经为多家公司提供了方案，知名客户有TOSHIBA-AIRCON、GEDORE等品牌商，同时也在Salama平台上构造了Ishow企业电子目录产品服务。

WeX5具备单View的性能特点，相比PhoneGap、Bootstrap有大幅度性能提升，同时也是以Html5、Javascript、Css3为技术基础的Web型App框架;WeX5框架按照Apache协议将所有源代码进行了开源，技术和模式上显得很开放。

AppCan在技术架构上和PhoneGap类似是Web主体型中间件，但是通过结合了一些原生交互效果能够达到iOS、Android平台都比较一致的用户体验。

但是相比PhoneGap、WeX5的开源，AppCan相对封闭的路线显得过于谨慎。

Hybrid App这个领域虽然还处于比较初期的阶段，但是已经有很多优秀的公司和技术团队在致力于跨平台开发移动应用中间件技术的研究，给了开发者众多选择。

开发者可以根据实际的项目需求来选择中间件。Web App虽被浏览器厂商和搜索引擎公司所推崇，但存在用户体验差、盈利模式不明确等现阶段无法解决的问题，或最终夭折。

Hybrid App正在被越来越多的公司和开发者所认同，势必会成为新世界的王。

参考资料：

SuperWebView——百度百科

获取代码如下：

<div id="test" style="tranform:translate3D(20px,50px,0);"></div>

var style = documentgetElementById('test')style;

var transform = styletransform || '';

var transformY = transformmatch(/translate3d\(\d+px,\s(\d+)px,\s(\d+)px\)/i)[1];

解释：

style是id为test的div的style属性

transform是style规则中的transform属性，此处忽略前缀问题，如果需要取-webkit-transform则可以通过WebkitTransform获取

transformmatch(/translate3d\(\d+px,\s(\d+)px,\s(\d+)px\)/i)[1];获取translate3d第二个参数的数值，此题中为50

以上就是关于移动端Web页面适配方案（整理版）全部的内容，包括:移动端Web页面适配方案（整理版）、启用多进程webview这个有什么用、如何用JS获取translate3d中的数值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！