原题目:手机端兼容手册!聊一聊安卓系统折叠屏给互动设计方案和开发设计产生的转变

创作者 大貘,阿里巴巴前端开发技术性权威专家

好多年前,前端开发同学们都感觉PC端的兼容(适配解决)难,都觉得手机端的时期兼容会非常容易很多,也不用考虑到那麼多的事儿。客观事实并不是这般,手机端的时期一样遭遇着各种各样兼容的解决。
非常是刘海机的出現,前端开发必须考虑到刘海机兼容。
商城网购网站建设而现如今伴随着三星Galaxy Fold和华为公司Mate X折叠屏手机上的问世,前端开发同学们然后又要解决折叠显示屏的兼容。

就大家精英团队来讲,在上一月就收到有关的通告,必须解决折叠屏的兼容。碍于真机难能可贵,前不久就根据仿真模拟机,干了一些简易的兼容检测,但是好运的是,今日取得了真机(三星Galaxy Fold) ,写了一个简易的Demo,干了一些兼容的检测。专此将有关感受和大伙儿一起共享资源,期待对大伙儿有一定的协助。

折叠屏机器设备的有关主要参数

以便更强的做相对的兼容解决,大家必须先向机器设备有关的主要参数做一定的掌握。

简易地说,三星Galaxy Fold和华为公司Mate X的较大差别就是 双屏内折叠对单屏外折叠!

三星Galaxy Fold配用了两块显示屏,一块坐落于机身两侧的一边,合适折叠情况下应用。这方面外屏是一块4.6英寸1960 x 840 Dynamic AMOLED显示信息屏:

Galaxy Fold的另外一块显示屏仅有在机身被进行时才会出現。这方面内屏规格做到了7.3英寸,占比为4.2:3,辨别率为 2152 x 1536:

外屏的应用方法和如今手机上一样,只不过是变小些、外框宽了些。

内屏的尺寸较大则能在打游戏、播放视频、看地形图、照相视频语音通话等状况下出示大量的內容显示信息。尺寸较大也让多个任务解决已不是可有可无,公布会当场展现的三每日任务同时解决令人印像刻骨铭心。

华为公司Mate X的折叠选用了一块外接显示屏。彻底进行时,展现在眼下的是一块 8英寸、8:7.1的 2480 x 2200 OLED显示信息屏:

折叠起來后,一块大屏幕能变成两块各自坐落于机身正、背面的“小”屏。反面显示屏为 6.6英寸,辨别率为2480 x 1148,占比为19.5:9,是现阶段流行手机上的显示屏占比。反面的显示屏则是一块 6.38 英寸 2480 x 892辨别率显示信息屏,占比为25:9。

针对Web前端开发来讲,大家关键关心的好多个主要参数是 辨别率、 DPI 和 显示屏总宽*等。简易的将有关主要参数纳入:

相关于机器设备有关的主要参数,大家能够根据相对的API来获得(这一太重要):

DPI:window.devicePixelRatio UserAgent:window.navigator.userAgent 显示屏总宽:window.screen.width 显示屏高宽比:window.screen.height 视窗总宽:window.innerWidth 视窗高宽比:window.innerHeight

而显示屏规格、辨别率、清晰度相对密度三者关联中间存有相对的测算关联:

例如显示屏辨别率为:1920px x 1080px,显示屏规格为 5英寸得话,那麼相匹配的DPI为440,即:

折叠屏给互动设计方案产生的差别化

无论是三星 Galaxy Fold的内折叠屏還是华为公司 Mate X的外折叠屏帮我们最形象化的实际效果相近于iPhone和iPad的差别:

折叠情况相近于iPhone;进行情况相近于iPad。

显示屏宽窄的转变帮我们的互动设计方案也会有来有关的转变。

针对Web设计方案来讲,当折叠屏自小屏方式变化成大屏幕方式时不可该仅仅界面的等占比增大,只是要考虑到自适应网站设计方案。叙述响应式设计方案最知名的一句话便是:

“Content is like water,即假如将显示屏看做器皿,那麼內容如同水一样”。

在之前响应式设计方案大量用在PC Web设计方案上,但如今折叠屏手机上的出現,大家在手机端也应当考虑到响应式设计方案,下列是设计方案时要要考虑到的关键点:

并不是简易的响应式设计方案

折叠显示屏在 “进行”态时要考虑到是平板电脑方式還是双显示屏方式,假如是平板电脑方式,那麼內容应当在一个总体里;倘若双显示屏方式则能够考虑到不一样显示屏展现不一样內容。设计方案时要要依据具体要求和情景开展方式挑选。

如圖所显示,內容在同一个总体里,仅仅视觉效果(排版设计)实际效果上面有差别。

或是

上两图展现了不一样的显示屏展现不一样的內容。

考虑到根据Fragment(片断)设计制作

Fragment是Android3.0明确提出的API,出現的初心是以便UI更灵便地适应大屏幕幕的平板电脑电脑上。

Android官方网对Fragment的叙述是:

“Fragment表明Activity中的个人行为或客户页面一部分。能够将好几个Fragment组成在一个 Activity 中来搭建多窗格 UI,及其在好几个 Activity 中反复应用某一Fragment。

选用不一样的Fragment设计制作,能够保证不一样內容不在同的显示屏展现,乃至在同一屏中能够展现好几个不一样的內容。针对那样的情景,互动的方法和个人行为都可能有一定的转变。例如进到每一个不一样的Fragment应当是如何样的一个互动方法;例如回到按键,滑屏等也是如何一个互动方法。这一切都非常值得大家去讨论。

例如说,很有将会未来手淘就可以像下边那样,在进行情况开启好几个Fragment:

参照微软公司的UWP设计方案定义

UWP即Windows 10中的Universal Windows Platform(Windows通用性运用服务平台)。

UWP运用的核心理念其实不是为某一个终端设备而设计方案,只是同一套编码和设计方案能够在全部Windows10机器设备上运作,包含Windows 10 Mobile / Surface / PC / Xbox / HoloLens这些。它的响应式设计方案设计方案方法包含下列六点:

下边的內容节选自《UWP 响应式编程设计详细介绍》一文。

https://ui.cn/detail/49641.html

调节部位

你可以以更改 UI 原素不在同显示屏上的部位。例如下边这一事例:以便保证同时展现2个原素,手中机上大家务必选用竖向翻转页面,而在平板电脑电脑上上,大家能够调节架构的部位,变成全屏翻转页面。假如你用网格图设计方案这种部位,你还可以不变变內容架构,但别的 UI 原素可使用响应式设计方案。

它是一个照片运用的事例,內容架构在大屏幕幕上被更改了部位。

调节规格

你可以以根据调节空白页和 UI 原素的规格来提升架构,例如下边这一事例,能够根据简易的扩大內容架构规格来提高大屏幕幕的阅读文章感受。

调节次序

根据调节 UI 原素的次序和方位,提升內容显示信息实际效果。举个案子,在大屏幕上运作时,能够再加上一栏,而且添加归类目录,这种全是有效的。

这一事例展现了手中机上应用一栏竖向翻转,而在平板电脑上应用两栏横着翻转的提升。

呈现

你可以以根据显示屏的真正尺寸,机器设备适用的作用,特殊的状况或是显示屏方位展现页面。

下面的图是一个带有照相机按键的 Tab 的事例。平板电脑电脑上和台式一体机机将会沒有拍摄头,因此照相机按键不被显示信息出去。另外一个案子是新闻媒体播发器,小显示屏上这种按键一般是删掉减的,但在大屏幕幕上这种按键是被彻底保存的。PC 上的新闻媒体播发器比手机上上的有大量的作用。

换位

此项方法是为特殊显示屏规格或显示屏方位转换特殊的页面。下边这一事例是导航栏莱单:小显示屏上他是掩藏在汉堡包莱单中竖向排序的,可是在大屏幕幕上,更大的 Tab 是更强地挑选。

更改构造

你可以认为特殊的机器设备提升特殊的构造。下边这一事例便是二种不一样的接合构造。

下面的图是一个智能化家中程序,应用了更改构造的方法

折叠屏下的手淘将将会是那样的

UWP设计方案定义是一个十分好的一个定义。假如没多久的未来,折叠屏为变成一个流行之一得话,除开UWP设计方案产生的设计方案和互动的转变以外,还会继续有别的更出色,或更有效的互动设计方案定义吗?

或是简易地说,折叠屏时期的手淘可能是啥样的呢?

前边大家提及2个(或好几个)Fragment的设计方案,假如未来的App里能在宽屏幕方式(折叠屏进行方式)开启好几个Fragment时,大家的互动设计方案可许可能是那样的。

在今年圣诞节当天,淘宝网设计方案 明确提出了手淘在折叠屏下的定义设计方案。

在该文章内容中,创作者明确提出折叠显示屏时期下,手淘App对于折叠屏的几大特点实际进行相对的设计方案。

大屏幕內容更丰富多彩

在折叠屏中,顶端和底端导航栏特性的部件归属于网页页面的公共作用,采用形象化的 横着拉申兼容方法;而之中网页页面能够选用內容添充兼容方法,将次级线圈关键內容展现在第二屏。

有将会未来在信息的第二屏內容是闲聊对话框,能迅速浏览信息里的全新內容,提高闲聊转换的高效率。

多个任务高效率提高

在平时应用手机上解决负责人务时,常常会遇到临时性通告信息等支系每日任务解决,负责人务与支系每日任务情景的经常转换给客户产生很高的实际操作成本费。

折叠屏的 “第二屏” 可让客户能够离不了开当今情景就可以方便快捷的解决子每日任务,提高多个任务的解决高效率。下边举例说明淘宝网上的实例协助大伙儿感受多个任务产生的诸多方便快捷。

例如说,在折叠屏进行情况的方式下,你将能够一边看淘宝网直播间,还能够让商品目录展现出更大大量的照片及其扼要的信息内容协助客户做基本的分辨,边看边逛互不影响。

折叠屏兼容姿态

都说 最底层工程建筑将决策顶层设计方案。这一点也不假。

在PC时期,诸多前端开发开发设计者都忙于奔忙解决各种各样不一样版本号访问器顾客端的适配解决;在手机端时期,本来认为可能更改这一情况,客观事实并不是这般。

伴随着iPhone6,iPhone6+的出現,不但仅限于解决不一样显示屏的Android机器设备,还必须考虑到杂屏时期的iOS机器设备。在哪个情况下设计方案和开发设计以便更强的兼容,选用了一种适度的设计方案,例如手淘设计方案师和前端开发开发设计的兼容合作基本构思是:

挑选一种规格做为设计方案和开发设计标准 界定一套兼容标准,全自动兼容剩余的二种规格(实际上不但这二种,你懂得的) 独特兼容实际效果得出设计方案实际效果

手淘设计方案师常挑选iPhone6做为标准设计方案规格,交货给前端开发的设计方案规格是按750px * 1334px为标准(高宽比会伴随着內容是多少而更改)。前端开发开发设计工作人员根据一套兼容标准全自动兼容到别的的规格。

开发设计工作人员对于该情景出示了不一样的兼容处理计划方案。例如业务流程比较流行的一种兼容计划方案,根据lib-flexible库相互配合CSS的rem企业来做相对的等比放缩兼容。

flexible.js计划方案也就手淘精英团队出示的一种出色的兼容处理计划方案。即:《应用Flexible完成手淘H5网页页面的终端设备兼容》。

客观事实上,flexible.js计划方案(业务流程常称rem兼容计划方案)基本概念是仿真模拟视窗企业vw、vh、vmin或vmax基本原理。伴随着视窗企业获得大量机器设备的适用以后,许多精英团队刚开始停止使用flexible.js的兼容计划方案,而改成vw-layout的兼容计划方案。

vw计划方案(常称vw-layout计划方案)要我们在手机端兼容越来越更加非常容易。

vw计划方案假如应用于PC端或是显示屏较宽的终端设备机器设备上,会出现一定的缺点。

但这一切并沒有完毕。伴随着iPhone企业(Apple)的刘海机iPhone X、iPhone XS、iPhone XR、iPhone XS Max的出現,无论是设计方案還是开发设计又要刚开始应对于刘海机终端设备的兼容解决。

到现阶段才行,尽管安卓系统也是有许多知名品牌有相对的刘海机,但应对不一样的App(或是说精英团队),安卓系统刘海机不容易做相对的考虑到。

在刘海机中(或是说iOS11起)明确提出一个安全性地区的定义。设计方案师也对于安全性地区作出相对的解决:

前端开发开发设计也是有相对的特性env()来做相对的兼容解决。

而现如今大家又将不可不动始下手于折叠屏的兼容解决。

华为公司折叠屏官方网兼容计划方案提议

折叠屏在视觉效果实际效果来讲便是,显示屏增大了,手机上变平板电脑了。那样就需要求大家的APP在可折叠机器设备进行时,当今运用网页页面务必无缝拼接持续到另外一个显示屏,并可全自动调节尺寸配对新的合理布局,相反亦然。换句话说,运用程序必须提前准备好在好几个显示屏(不一样辨别率、相对密度等)中间转换。

实际上Google以前有其解决的对策,在上年的 Android Dev Summit 上,Google 就早已公布即将折起来叠屏出示“Screen Continuity(显示屏持续性)”的原生态系统软件适用,并将此项技术性称作:Foldables。运用这类软性显示信息技术性,App 能够保证折叠屏机器设备上的兼容工作中。

客观事实上,华为公司官方网对于折叠屏也出示了一些兼容计划方案。

X 轴方位响应式

尽可能维持Y轴方位上原素不会改变,X轴方位上响应式:

该计划方案较 可用于页面原素相对性单一,沒有很多目录类、或较多显示信息原素的网页页面。

合理布局內容拓展

参照 iPad(平板电脑)合理布局显示信息大量內容,针对区别了手机上和iPad合理布局的运用,在进行态优先选择考虑到参照iPad的大屏幕合理布局兼容进行态页面,显示信息大量內容;尽可能确保Y轴方位原素的不会改变:

该计划方案 一般可用于 WEB 类运用,网页页面特点通常是原素多,兼容标准以尽可能显示信息较多元化素优先选择。

分栏合理布局

针对设计方案太过栏工作能力的控制模块,必须在进行态反映分栏合理布局:

该计划方案 一般有显著 list 二级莱单的原素构造较为合适。

横纵屏合理布局一致

考虑到到进行态 8:7.1 的占比,进行态的全屏和坚屏提议一套合理布局。横纵一致;错误进行态的全屏独特解决,挪移合理布局无需反映。

假如细心比照,不会太难发觉华为公司官方网出示的兼容计划方案(进行情况方式)和 微软公司的UWP设计方案定义一些类似的地方。

2个(或好几个)Fragment设计方案

前边也提及过,在将来,折叠屏在进行情况也许能够同时展现2个或大量个Fragment。针对那样的情景,前端开发或是设计方案都相对性来讲要更非常容易。由于好几个Fragment更与我们如今的兼容方法贴近(未进行情况,和现阶段流行移动终端类似)。自然,在进行情况时,好几个Fragment同时展现不一样內容之时,也许每一个Fragment所占显示屏的占比会出现不一样,对于于这类情景,大家现阶段选用的vw-layout兼容方法,将没什么工作压力。

但是,同时开启2个或好几个Fragment时,对于不一样的情景在设计方案中也必须有一定的不一样。例如说顶端Bar和底端Bar选用占比拉申,正中间主內容开启好几个Fragment,不在同的Fragment中显示信息不一样的內容。

选用响应式设计方案计划方案

拥有解过响应式设计方案的同学们也许都了解,响应式设计方案在PC上的顾客端获得很大范畴的应用情景。针对手机端上,响应式设计方案的影子其实不普遍。但现如今天,安卓系统折叠显示屏的出現,也许在将来的一些Web运用或Web网页页面里将会见到响应式设计方案的身影。

假如你决策在你的运用中选用响应式设计方案来兼容折叠屏进行情况的实际效果,那麼就会有必需简易地掌握一下响应式设计方案的好多个基本准则。

@Sandijs Ruluks早就在2017年就对于响应式设计方案明确提出九大基本设计方案标准。

http://blog.froont/9-basic-principles-of-responsive-web-design/

响应式 vs. 响应式网页页面设计方案

许多初学都都非常容易把响应式设计方案和响应式设计方案搞混。客观事实上,他们看上去好像是同样的,但客观事实并不是这般。这二种方式紧密联系,并沒有说哪一个是恰当的哪个是不正确的,內容决策一切。

內容流动性

伴随着显示屏规格缩小,內容可能占有大量的竖直室内空间,而正下方的內容便会被然后向下推,这便是说白了的流动性。假如你是应用清晰度或磅来开展设计方案的,这将会会出现点繁杂,可是如果你习惯性了以后,便会越来越很更有意义了。

相对性企业

画布尺寸能够是Desktop、Mobile或者他们中间的一切规格。清晰度相对密度也将会有一定的不一样,因此大家必须灵便的、在各种各样显示屏上面可使用的企业。这便是相对性企业(如%、vw等)派上放场的情况下了。因此设定50%的总宽也就寓意着它会占有显示屏(或视窗,即开启的访问器对话框的规格)的一半。

在CSS的全球中,相对性企业有好几个,不一样的情景都是有其优势:

上边提及%来做兼容解决并没有影晌,但%的测算相对性来讲会比较蛋疼,幸运的是,大家能够选用视窗企业,例如vw、vh、vmin或vmax来取代%。

无论是%還是视窗企业,他们测算方法都是有所不一样。她们都没有优劣之分,仅有合适不适感合之分。

在vw-layout兼容计划方案,选用的便是视窗企业。

断点

断点是响应式设计方案中一个十分关键的定义。它容许合理布局在预订义的点更改相对的UI设计风格。比如:PC端访问器合理布局是三列,可是手中机手机端上只展现一列。大多数数CSS特性能够依据断点更改。一般你能依据实际的內容来设定断点。

这儿常说的断点便是选用CSS中的新闻媒体查寻特点,但那样一来可能提升很多的编码量、开发设计成本费和维护保养成本费。

伴随着技术性持续的创新,CSS的特点也越来越越强劲,就到现阶段才行,能够依靠CSS Grid、minmax()、repeat()、auto-fill和fr等特点,更加容易于完成响应式实际效果。自然一些独特的情景還是必须抗压强度依靠断点(新闻媒体查寻)来解决。

min-width和max-width

前边提及过,在响应式设计方案中,更为重要的便是标准CSS中的新闻媒体查寻,。新闻媒体查寻能够有标准的运用CSS标准,它告知访问器应当忽视或运用什么CSS标准,而这种都在于客户的机器设备终端设备。

在新闻媒体特点中,大多数数的新闻媒体特点都可以以含有min或max的作为前缀,例如说min-width和max-width,用以表述 “最少的...” 或是 较大的...。用二张图来协助大伙儿来了解min和max的具体含意。

例如,设定width为100%,随后max-width是1000px,那麼內容会铺满显示屏,可是不容易超出1000px。

嵌套循环目标

还还记得相对性部位吗?让许多原素的部位依靠于其他原素而定位是难以操纵好的,因而应用器皿来包囊原素可让它更加容易了解,也更干净整洁。这便是静态数据企业(例如清晰度)充分发挥功效的情况下了。针对你没要想控制模块化的內容(例如logo或按键),他们是有效的。

Mobile优先选择 還是Desktop优先选择

在技术上讲,假如一个新项目是以一个较小的显示屏刚开始,变为很大的显示屏(Mobile优先选择),還是相反(Desktop优先选择),并沒有很大的区别。但是它還是提升了附加的限定,能够协助你决策是不是从Mobile优先选择刚开始。一般大伙儿在一刚开始的情况下都是两边一起写,因此,還是看一下哪一个运作起來更强。

网页页面字体样式 vs 系统软件字体样式

期待你的网站在有很帅的字体样式吗?可使用网页页面字体样式!尽管他们看上去十分棒,可是记牢字体样式放得越大,你载入网页页面的時间也会越长。在另外一层面,载入系统软件字体样式确是快如电闪,但当客户当地沒有这套字体样式时,它便会回到默认设置的字体样式。

位图文件 vs 矢量素材图

你是不是想过在标志上加上许多的关键点和花里胡哨的实际效果?假如想过得话,应用位图文件较为适合。假如沒有,能够考虑到应用矢量素材图。针对位图文件,应用的是jpg、png或gif文件格式的图象,而针对矢量素材图,最好的挑选是SVG或标志字体样式。每一个都是有相匹配的优点和缺陷。可是照片的尺寸也必须高度重视——网页页面上的照片务必历经提升。另外一个层面,矢量素材图一般较为小,可是一些老版的访问器不兼容。另外,假如它有许多曲线图得话,它也将会会比位图文件要重。因此,谨慎挑选。

上边提及的九大基本准则,尽管明确提出的時间早,但针对应用响应式设计方案设计制作Web网页页面或Web运用都具备很好的参照。自然,直到现在或将来,大家完成响应式设计方案能够使用别的的一些CSS特点,会要我们越来越更加简易:

依靠calc()涵数,vw等视窗企业,能够对font-size开展精确设定:

不在同尺寸对话框下完成不一样的字体大小。

根据CSS 的 grid合理布局、minmax()、repeat()涵数、fr企业及其auto-fill(或auto-fit)另配合min-content、max-content、fill-content会让自适应网站越来越越简易。

vw-layout和新闻媒体查寻紧密结合

无论是华方官方网出示的兼容计划方案或者淘宝网设计方案精英团队出示的折叠显示屏的设计方案定义還是响应式设计方案(或是说UPW定义),针对折叠显示屏的兼容都是有不一样的协助。

vw-layout合理布局可让大家随便地做到X轴方位响应式或是横纵屏合理布局一致或横纵屏合理布局一致 响应式设计方案(依靠新闻媒体查寻)可让大家随便地做到合理布局內容拓展或分栏合理布局

假如选用好几个Fragment来展现內容,那麼vw-layout或别的的相对性企业合理布局都可以以十分随便的协助大家完成折叠屏不在同情况的兼容实际效果。

假如你只为环比例变大,那麼vw-layout也将是一个最好计划方案。

假如你要在折叠情况和进行情况有不一样的合理布局设计风格,那麼响应式设计方案或是UWP定义将不是错的挑选。在这里种情景之中,把vw-layout和新闻媒体查寻(响应式设计方案)融合起來,将是最好挑选。

建立新特性或明确提出国家免检产品准

刘海机的出現,iPhone企业对于该种类机器设备明确提出了env()涵数和安全性地区的定义。要我们在解决刘海机兼容的情况下将越来越更非常容易。

尽管env()最开始仅用于iOS的系统软件,但伴随着这些方面的要求大量,业界同行业将该涵数提及W3C标准的计划方案中,让其变成W3C标准。依据同样的一个定义,大家是不是还可以对于安卓系统折叠机,出示一个相近的涵数或是特性。例如folding()。此外,针对手机端,大家在新闻媒体查寻中orientation: landscape或orientation: portrait来分辨机器设备是不是横纵屏。一样的基本原理,大家不是是还可以依靠相近新闻媒体查寻这类方法来对安卓系统折叠屏做类似的设定呢?

大家手淘 或是说团体许多App在安卓系统上面选用的是UC的核心,即使没法在W3C标准中促进,大家UC核心的同学们是不是能够对于折叠屏出示相对的分辨标准呢?希望UC同学们能出示。

实例

自收到要兼容安卓系统折叠屏的要求时,实际上大家精英团队在这里层面的工作压力其实不很大,由于大家选用的是vw-layout合理布局计划方案,加上上大家是Web网页页面(也便是大伙儿常说的H5网页页面),在这里层面具备纯天然的兼容作用。仅仅在进行情况也许必须做一些关键点化的解决。例如金币生态园:

依靠新闻媒体查寻,能够随便处理那样的关键点难题。

此外以便更强的感受一下自身的念头:

vw-layout、,对三星折叠显示屏做相对的兼容解决(华为公司还没有有取得真机)。

因此我写了一个简易的小实例:

Demo线上实际效果能够点一下这儿。

https://huodong.m.taobao/act/folding.html

手淘卡牌的合理布局:

最基本的计划方案就是我们精英团队一直应用的vw-layout合理布局计划方案,另配合CSS Grid:

假如不做一切解决,大家在折叠屏2个情况下的实际效果以下:

假如大家想让在进行情况展现大量的內容时,或是说不一样情况选用差别化的设计方案,那麼大家能够依靠新闻媒体查寻来解决。以便精确做到,先用Java一些API获得机器设备有关主要参数:

輸出大家要想的数据信息:

依靠新闻媒体查寻,大家便可以做大家要想的事儿:

这一情况下你看看到的实际效果以下:

假如你略加解决,还能够获得更不一样的合理布局:

依靠新闻媒体查寻来完成差别的设计方案,针对开发设计来讲是比较蛋疼的,会提升很多的开发设计成本费和维护保养成本费。而助上边的新闻媒体查寻是只对于于三星折叠屏,但伴随着大量折叠屏机器设备的出現,事儿能变得越来越越艰难:

因此大家還是期待有一个统一性的分辨特性。

这一实例向大伙儿演试的是H5在三星中的兼容。针对别的的折叠屏机器设备,大家能够按一样的方法或基本原理来开展。

折叠屏机器设备调节

假如你沒有真机得话,在调节折叠屏的情况下能够选用仿真模拟机:

能够运作相对的仿真模拟机,例如华为公司Mate X仿真模拟机:

假如你是应用Chrome开展调节,你要能够建立相对的仿真模拟机。例如三星的UserAgent信息内容以下:

Mozilla/5.0 (Linux; U; Android 9; zh-CN; SM-F9000 Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.1.2.992 Mobile Safari/537.36

那样便可以建立折叠和进行的二种情况:

那样便可以立即在Chrome中调节了:

针对别的折叠屏机器设备,假如给你有关的主要参数,还可以按上边相近的方法开展机器设备。

总结

還是那句话,最底层工程建筑始终决策顶层设计方案!无论时期如何转变,作为技术性工作人员都应当持续的去探寻,找寻相对或最好的处理计划方案。

在这里一篇文章中,尽管大家以折叠屏主导线开展进行详细介绍,但全篇除开折叠帮我们产生的转变以外,还详细介绍了响应式设计方案、rem兼容、vw-layout兼容及其刘海机兼容等计划方案。

客观事实上,这也是一篇相关于手机端兼容全集或手册。

最终期待该文对大伙儿有一定的协助。回到凡科,查询大量

义务编写:

手机端兼容手册!聊一聊安卓系统折叠屏给互动

原题目:手机端兼容手册!聊一聊安卓系统折叠屏给互动设计方案和开发设计产生的转变 创作者 大貘,阿里巴巴前端开发技术性权威专家 好多年前,前端开发同学们都感觉PC端的兼容


预约挂号



扫描二维码分享到微信