IPhoneX网页布局简介

Hwg 发布于2019-08-29 15:26 / 857人阅读

摘要：在使用定位的时候如果和理想效果有偏差可以试试设置的高度为全屏时代即将来临，未来我们应该有更多的方法进行网页布局。

IPhoneX全面屏是十分科技化的，但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配，没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试。

设计和尺寸相关

IPone型号	屏幕尺寸	屏幕密度	开发尺寸	像素密度	倍图
4系列	3.5英寸	326ppi	320*480pt	640*960px	@2X
5系列	4英寸	326ppi	320*568pt	640*1136px	@2X
6/6s/7/8	4.7英寸	326ppi	375*667pt	750*1334px	@2X
6p/6sp/7p/8p	5.5英寸	401ppi	414*736pt	1242*2208px	@3X
X	5.8英寸	458ppi	375*812pt	1125*2436px	@3X

在设计的角度上，根据开发尺寸我们用IPoneX和比较经典的4.7英寸屏幕进行对比。竖屏模式下不难发现X比其多了145pt，那么我们应该怎么分配这145的距离呢。

顶部 Navigation Bar增加44（for“刘海”）

底部 Bottom Bar增加34（for“黑条Home按钮”）

中间的 Safe Area 区域（for“内容区域”）

安全区域

][2]][1]

何为安全区域，简单来讲就是我们在此区域内设置一些交互的按钮或者链接不会被影响。下图的话底部按钮就会受到一些影响，图片随意截取，请勿在意：

viewport-fit

可喜可贺，IOS11给我们提供了一个新特性 viewport-fit

值	说明
auto/contain	页面默认内嵌
cover	页面充满屏幕

viewport-fit默认情况下是 auto 我们可以看一下同一个页面不设置 viewport-fit 和设置其为 cover 的两种表现形式：

不设置：

设置为 cover：

当然，在横屏情况下我们可以更清晰地看到，设置cover可以使我们的页面导航和tag更加符合设计，但是内部的我们应该怎样进行布局呢？是直接使用 padding 还是有别的方法呢？

CSS constant()函数

我们可以通过计算其padding值来进行布局，解决文字被埋在传感器底部的问题。

但是IOS11给我们提供了更简单的办法。WebKit 中新增了一个 CSS 函数 constant()，以及一组四个已经定义好的常量： safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottom。这四个常量分别代表了每个方向的非安全区域的值：

那我们试着现在给刚刚的被传感器覆盖的页面增加一些 css：

.con {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

是的。完美的效果。

瑕疵问题

但是如果现在我们现在把手机换成竖屏的话，会出现一些小瑕疵，因为我们设置的是 padding-left 和 padding-right 为安全区域外的变局的常量，所以当我们竖过来后，竖屏模式的 safe-area-inset-left 和 safe-area-inset-right 为0，那么文字还是会贴边的。

新的CSS函数 min() 和 max() 可以帮我们在不通过JS的情况下简单解决这个问题。（PS：现Safari暂未支持）

@supports(padding: max(0px)) {
    .con {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

这样的话 padding-left 会取较大的那个值。当 safe-area-inset-left 为0时候，其值会为 12px。

本文讲的一些方法对于现阶段的IPhone网页布局其实还是有一些兼容问题

constant() 需要我们对不支持的浏览器做一些兼容回退，并且CSS工作组对这个方法使用了不同的名称

max() 和 min() 方法现阶段还没有支持，我们还是要采用判断横竖屏的方法进行动态的设置，或者直接也抛弃 constant() 做固定的padding值。

在使用定位的时候如果和理想效果有偏差可以试试设置 body,html 的高度为 100%

全屏时代即将来临，未来我们应该有更多的方法进行网页布局。

本文部分图片和思想来自designing-websites-for-iphone-x

云服务器 GPU云服务器网页html标签简介布局网页网页布局设计 div网页布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113319.html

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
Are you sure you understand the responsive layout？

摘要：我们推荐使用作为字体单位默认情况下我们标签的为，我们可以利用媒体查询，设置在不同设备下的字体大小百分比布局用过的同学都知道，它里面有个栅格系统，说白了就是利用百分比来定义我们元素宽高，而不直接使用。曾几何时我认为使用了媒体查询就是响应式布局，这种理解实在是太浅薄了，今天就让我们重新来认识下什么是响应式布局查看demo 查看源码，欢迎star 什么是响应式布局前几年风靡一时Boot...

Shisui 2019-08-29 16:22 评论0 收藏0
Are you sure you understand the responsive layout？

摘要：我们推荐使用作为字体单位默认情况下我们标签的为，我们可以利用媒体查询，设置在不同设备下的字体大小百分比布局用过的同学都知道，它里面有个栅格系统，说白了就是利用百分比来定义我们元素宽高，而不直接使用。曾几何时我认为使用了媒体查询就是响应式布局，这种理解实在是太浅薄了，今天就让我们重新来认识下什么是响应式布局查看demo 查看源码，欢迎star 什么是响应式布局前几年风靡一时Boot...

longshengwang 2019-08-02 11:11 评论0 收藏0
iphonex适配

摘要：第三步元素的适配类型一完全吸底元素类型二非完全吸底元素，比如返回顶部侧边广告等第四步如果我们只希望才需要新增适配样式，我们可以配合来隔离兼容样式第一步：设置网页在可视窗口的布局方式ios11新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：第二步：页面主体内容限定在安全区域内env() 和 constant()ios11新增特性 ● safe-area-inse...

FrancisSoung 2019-08-26 11:46 评论0 收藏0