前言：移动端坑多，布局首当其冲。背景移动端应用有各种复杂的页面需求，不仅要解决单屏、多屏、定头定底等多种场景，还要兼容ios和Android内核。经过实际项目体验（手机模式开启），总结了一些经验，在此分享给大家。本文基于→Next轻量级框架与主流工具的整合。最新代码在这里→next-mobile-complete-demoJourney首先，需要实现的首页类似于一个app应用。第一站：统一flex布局的坑→flex教程首页如上图，然后偷懒直接用antd-mobile的tabbar，需要指定容器的高度。所以在项目开始的时候，直接通过js将容器设置为浏览器html窗口的高度：//htmlheight=bodyheight=maincontainerheightdoc.body.style.height=docEl.clientHeight+'px';这样做的好处也很多：垂直布局非常方便，无论是标签栏、标签页、固定头部元素还是底部固定元素，实现起来都非常简单；实现元素中心对齐、两端对齐、自动分配空间等也非常简单；同时也避免了安卓输入框带来的传统布局问题。不过这里唯一不足的是不兼容ios的前进后退操作栏和上下滚动回弹：滚动时无法隐藏前进后退操作栏，滚动时容易触发页面的回弹效果上下，导致滚动冻结。这里补充一下：如果在ios上使用正常的流式布局，当内容超过一定高度时，向下滚动会隐藏底部的前进和返回栏，向上滚动时会显示出来。当滚动到底部或顶部，再继续拉动页面时，会有回弹效果。这两个问题大大降低了ios的用户体验，又恰逢项目间隔，时间很多，所以推到了布局优化。第二站：寻找用户体验好的布局案例这里我们在搜索的过程中发现了两个有代表性的手机应用：bilibili的m站和腾讯新闻，它们采用传统的流式布局，头部固定，底部固定，所有内容平铺向下。Petal.comH5采用了将主容器的position属性设置为absolute的形式来脱离文档流。这两种布局方式在ios上的用户体验非常好。但与此同时，他们也发现了一些问题，比如：登录页面明明少了一屏，但还是有滚动；没有与iPhoneX兼容的安全域；弹窗滚动渗透等。如果能将这两种布局与flex结合起来，聚合各自的优势，基本上可以打造出用户体验和兼容性都令人满意的移动应用。那么，如何在已有的flex布局的基础上，将这两种布局整合起来，就成了另一个问题。第三站：基于flex调整布局结构。调整前，我的期望是：去除外部高度限制，去除垂直flex布局（少数单屏页面除外），将顶部、底部和弹出窗口设置为fixed。考虑到少数单屏页面需要继承html窗口的高度，主容器与文档流分离。调整后dom结构是这样的：html>body>div#root>div.main-content(position:absolute)只需要在main-content中加上height:100%即可满足单屏需求页。辛苦了！按照上面的思路改造后，又发现了一个新问题：document脱离流后，页面切换，html会保持上次滚动的位置。第四站：滚动条位置，滚动穿透，兼容iPhoneX，可能有滚动条位置记录的问题是手动的。如果设置为手动，则可以手动设置滚动位置。if('scrollRestoration'inhistory){history.scrollRestoration='manual';}然后设置滚动位置为切换路由后的起始位置：Router.events.on('routeChangeComplete',()=>{document.scrollingElement.滚动顶部=0;});这样每次页面切换都是从初始位置开始。开发遇到的问题在本次demo中没有出现。这里有点鸡肋，前后移动时不会记录滚动位置。如果需要记录前后滚动的位置，就不能使用这种脱离文档流的形式，需要使用body滚动的形式，即。解决滚动穿透的问题，需要分别处理滚动弹窗和非滚动弹窗。对于没有滚动的弹窗，在弹窗弹出时禁用touchmove事件，隐藏时去掉事件监听。有滚动弹窗，需要找到页面的滚动容器，设置overflow:hidden兼容iPhoneX添加viewport-fit=cover
