整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前2篇文章讲了《为什么375×667是移动端原型设计的最佳分辨率如何设置手机APP原型尺寸
所谓的APP原型适配手机，是指用手机浏打开原型页面的时候，横竖都刚好撑满屏幕。当然如果页面比较长，高度超过一屏是没问题的。
比如你的原型是375×667，手机是iPhone6/6s/7，那在手机上查看的时候无需缩放，默认撑满屏幕。
如果你的原型是360×640，而手机是Android的小米4、小米note、华为p7、p8荣耀6、7这些主流机型，也是一样的。
比如你的原型是375×667,而你的手机是华为p8，1080×1920。理论上来说无法完美适配APP中所有的页面。但是除了有下导航的页面一般都没问题。
你需要在Axure生成HTML的时候设置一下手机上如何展示原型。
请勾选包含视口标签。浏览器显示网页，默认是按照网页自身分辨率来展示的。勾选了此项之后，里面的区域按照下方规则来处理展示。
宽，使用默认的device-width即可。
高，一般不需要填，因为是根据宽度来决定的。
最小缩放倍数和最大缩放倍数，一般不需要填。
允许用户缩放，一般填写no。
具体规则是原型页面的横向分辨率x初始缩放倍数xDPR参数=手机屏幕的横向分辨率。得出这个值填到上图中的对应位置。
而这里的DPR参数(devicePixelRatio)，代表的是设备像素和CSS像素的比例，下方的chrome网页调试中也揭示了这一点。
所以上面的华为p8应该设置为0.96，你可以根据机型去百度搜索对应的DPR参数是多少。
通过chrome-视图-开发者-开发者工具，切换到你想看的手机尺寸。同时也可以用这个工具去了解在其他机型上面的效果，以方面了解是不是需要单独适配。
当然safari的菜单栏-开发-响应者模式也可以。
请用手机浏览器打开该网页，请用手机浏览器打开该网页，最好生成到桌面查看效果。比如我设计的原型。
建议竖向减掉20px，因为Axure默认不显示顶部状态栏。
建议你们下次设计APP原型的时候按照通用分辨率375×667来设置，次选方法是按照自己手机的逻辑分辨率来定尺寸。。
如果想明白为什么要这样设置，可以去搜索viewport和逻辑分辨率等概念。当然就使用而言，PM无需了解这些知识。
至于如何把原型放到手机上面查看，我们下次再讲。
着携带设备的越来越普及，移动端项目会越来越多的接触。所以想给大家介绍一下移动端适配那点事。#前端#
手机物理像素点
每个像素都是由三原色组成的单元。
1080*1920就是横向1080 纵向1920个物理像素点。
随着手机发展 从 720p 1080p 到现在的 2k 4k，逻辑上如果手机分辨率翻倍，岂不是之前的网页都缩小成一半了，不能迭代一次开发一次吧。 为了解决这个问题，就引申出 逻辑分辨率 的概念了
设备独立像素(Density-independent Pixel, DIP) 又称密度无关像素。这个点代表一个可以由程序使用的虚拟像素。就比如 以前 360p 屏幕（宽360个物理像素 高640个物理像素） 的时候，你的 1px（一个逻辑分辨率） 定位一个 物理像素点。等到了 720p（宽720个物理像素 高1280个物理像素） 的时候 1px 定位 2*2个物理像素点
程序虚拟像素与物理像素的对应关系
PPI超过326的屏幕就是 视网膜屏幕（Retina）#iPhone#
PPI计算方法
设备像素图
上面设备列表图中的 Dpr算法：
设备像素比(DPR) ＝ 物理像素(DP) / 设备独立像素(DIP)
这样关系就清楚了很多，通俗的说 1个css程序像素占用多少设备像素
这个数值一般都用在多倍图中，就是UI切图，经常会有一倍图，二倍图（@2x），三倍图(@3x)。
因为图片也是由像素点组成的，如果Dpr为3 ，100*100px 的img 元素，就应该放入一张实际宽高 300*300 的图片，这样才能清楚的展示。如果放入100*100 的图片，没有占满的像素点，会通过算法去取附近点的颜色，图就会模糊。放600*600 的图，多出的像素点会通过算法取平均色，图就会钝化。
一般认为 移动设备上有 三个 viewport
移动端浏览器的默认布局视口， 可以通过 document.documentElement.clientWidth 来获取。
移动设备流行之前，pc网页大行其道，一开始为了让所有网站正常显示，移动端浏览器就决定默认情况下把viewport 设为一个较宽的值（980px）。这样pc端的网站也可以在手机上正常显示。
代表 浏览器可视区域的大小，可以通过 window.visualViewport 来获取
最理想的 viewport ，宽高等于设备屏幕的物理宽高，剔除了分辨率的干扰，针对同一 ideal viewport 设备开发的网站，都将完美呈现。
理想视口可以 用过 meta标签去实现
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">宽度等于设备宽度，初始页面缩放1倍（就是不缩放），最小最大缩放1倍，禁止用户缩放
最后这个 viewport-fit=cover 是针对iphone刘海屏的，刘海跟ios底部操作栏会使网页不能全屏
淘宝移动端meta设置
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">原始不适配 -- viewport控制缩放 -- 媒体查询 -- 响应式布局 -- 移动端分流 -- Rem
移动端分流原理，主要是通过 UA（User Agent用户代理）去判断上网设备, 比如移动端输入 pc网址 https://www.toutiao.com/，就会跳转到 https://m.toutiao.com/ （移动端适配地址）。
附上判断的js代码
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}现在项目适配使用的是 vw + rem
rem（font size of the root element）是指相对于根元素（html）的字体大小的单位。
vw是可视窗口的宽度单位，不受设备分辨率影响, width: 1vw 等于 width: 1%。倘若 浏览器宽1000px，1vw = 10px
移动设备的原型图一般都是二倍图（宽750px）
面试官：你知道移动端适配吗？
---
**开篇：移动端适配的重要性**
在移动互联网飞速发展的今天，移动端适配已成为每一位前端开发者必备的核心技能之一。面对市场上琳琅满目的手机型号和屏幕尺寸，如何让同一套代码在不同设备上呈现出近乎完美的视觉效果和交互体验，是每一位面试官都会关心的问题。本文将带你深入探讨移动端适配的核心技术和策略，助力你从容应对面试挑战。
---
**【第一部分】理解移动端适配的挑战**
**标题：设备碎片化与分辨率多样化**
随着智能手机硬件的快速发展，各品牌、各型号设备的屏幕尺寸、分辨率和像素密度差异巨大。这意味着，如果不对页面进行适配，可能会出现内容错位、字体大小不一、图片模糊等问题。
例如，iPhone 6与iPhone 13 Pro Max的物理尺寸和分辨率相差甚远，前者分辨率为750 x 1334，后者则是1284 x 2778。因此，我们必须有一套有效的适配策略来应对这种情况。
---
**【第二部分】viewport元标签与设备像素比**
**标题：viewport元标签与 DPR 的秘密**
适配的第一步是设置`viewport`元标签，以控制页面在移动设备上的缩放程度和布局视口的大小：
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
这里`device-width`意味着布局视口的宽度等于设备的独立像素宽度，`initial-scale=1.0`表示初始缩放比例为1，即一个CSS像素对应一个设备独立像素。
同时，了解设备像素比（DPR）的概念也很关键，它是设备物理像素与CSS像素的比例，用于解决高清屏下的图像模糊问题：
```javascript
// 获取设备像素比
let dpr = window.devicePixelRatio || 1;
```
---
**【第三部分】CSS单位与适配策略**
**标题：Flexbox、Grid布局与CSS单位REM、VW/VH**
- **Flexbox与Grid布局**：利用现代CSS布局模式，如Flexbox和Grid，可以更好地处理元素的弹性布局，减少因设备尺寸变化导致的布局混乱。
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc(33.33% - 20px);
}
```
- **CSS单位REM与VW/VH**：REM基于根元素字体大小，允许我们基于页面全局字体大小进行适配；VW/VH基于视口宽度和高度，可以很好地应对屏幕尺寸变化。
```css
html {
font-size: 16px; /* 基准字体大小 */
}
.box {
width: 80vw; /* 盒子宽度为视口宽度的80% */
height: 50vh; /* 盒子高度为视口高度的50% */
}
@media screen and (min-width: 768px) {
html {
font-size: 20px; /* 在大屏设备上增大基准字体大小 */
}
}
```
---
**【第四部分】响应式设计与媒体查询**
**标题：使用媒体查询实现多设备适配**
媒体查询是CSS3的一个强大特性，可以帮助我们根据不同设备的特性（如视口宽度、设备像素比等）应用不同的CSS样式：
```css
/* 为小于600px宽度的设备设置样式 */
@media screen and (max-width: 600px) {
.header {
font-size: 18px;
}
}
/* 为大于等于600px宽度的设备设置样式 */
@media screen and (min-width: 600px) {
.header {
font-size: 24px;
}
}
```
---
**【第五部分】CSS框架与预处理器的适配功能**
**标题：Bootstrap、TailwindCSS与PostCSS的适配解决方案**
许多CSS框架（如Bootstrap）和预处理器（如PostCSS）都提供了便捷的适配工具和策略。例如，Bootstrap的栅格系统和响应式工具类，TailwindCSS的内置响应式前缀，以及PostCSS的插件如postcss-pixel-to-viewport，都可以极大地简化移动端适配工作。
---
**结语：**
移动端适配是一项涵盖多个维度的综合技术，包括但不限于viewport设置、CSS单位选取、布局模式、媒体查询以及框架和预处理器的应用。只有充分理解并掌握这些技术，才能在面临面试官“你知道移动端适配吗？”这个问题时，自信满满地给出满意的答案，并在实际开发中游刃有余地应对各种设备适配挑战。持续关注前沿技术，不断积累实践经验，你将在移动端适配领域攀登更高的山峰。
*请认真填写需求信息，我们会在24小时内与您取得联系。
