设计iPhoneX网站

设计iPhoneX网站

Safari开箱即用,可以在新iPhone X的边缘显示屏上精美地显示您现有的网站。内容会自动插入显示屏安全区域内,因此不会被圆角或设备的传感器外壳遮盖。

插入区域填充有页面的background-color(在或元素上指定),以与页面的其余部分融合。对于许多网站来说,这就足够了。如果您的页面仅包含纯色以上的文本和图像,则默认插图看起来不错。

其他页面(尤其是那些使用全角水平导航栏设计的页面,例如下面的页面)可以选择进一步扩展以充分利用新显示器的功能。《iPhone X人机界面指南》详细介绍了要记住的一些一般设计原则,UIKit文档讨论了本机应用程序可以采用的特定机制,以确保它们看起来不错。您的网站可以利用iOS 11中引入的一些类似WebKit API的新功能,以充分利用显示器边缘到边缘的特性。
在这里插入图片描述

使用整个屏幕

第一个新功能是对viewport称为的现有元标记的扩展,该标记viewport-fit提供对插入行为的控制。viewport-fit在iOS 11中可用。

的默认值viewport-fit是auto,这会导致上述自动插入行为。为了禁用该行为并使页面布局为屏幕的整个尺寸,可以将其设置viewport-fit为cover。这样做之后,我们的viewportmeta标签现在看起来像这样:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

重新加载后,导航栏看起来更好,从一边到另一边。但是,立即清楚为什么尊重系统的安全区域插图很重要:设备的传感器外壳遮盖了页面的某些内容,并且底部导航栏很难使用。

“ viewport-fit = cover”填充整个屏幕。

尊重安全区

采用后使页面再次可用的下一步viewport-fit=cover是将填充选择性地应用于包含重要内容的元素,以确保它们不会被屏幕的形状所遮挡。这将导致页面充分利用iPhone X上增加的屏幕空间,同时进行动态调整,以避免出现角,传感器外壳和用于访问主屏幕的指示器的页面。
在这里插入图片描述
为了实现这一目标,WebKit的iOS中11包括一个新的CSS功能,env()以及一组四个预定义的环境变量,safe-area-inset-left,safe-area-inset-right,safe-area-inset-top,和safe-area-inset-bottom。组合使用时,它们允许样式声明引用每侧安全区域插图的当前大小。

iOS 11中附带的env()函数名称为constant()。从Safari Technology Preview 41和iOS 11.2 beta开始,constant()已被删除并被env()取代。如有必要,您可以使用CSS后备机制来支持两个版本,但以后应该更喜欢env()。

env()在任何地方都var()可以工作—例如,在padding属性内:

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

对于不支持的浏览器,env()包含它的样式规则将被忽略;因此,重要的是继续使用单独为所有声明指定备用规则env()。
在这里插入图片描述

通过min()和max()将所有内容放在一起

本部分介绍了从Safari技术预览版41和iOS 11.2 Beta开始可用的功能。
如果您在网站设计中采用安全区域插图,则可能会注意到,除了安全区域插图外,指定您还需要最小填充量有些困难。在上面的页面中,我们用替换了12px的左侧填充env(safe-area-inset-left),当我们旋转回纵向时,左侧安全区域插图变为0px,文本紧靠屏幕边缘。

在这里插入图片描述

为了解决这个问题,我们想指定我们的填充应该是默认的填充或安全区域插图,以较大者为准。这可以通过实现全新的CSS功能min()和max()将在未来的Safari浏览器技术预览版本中提供。这两个函数均采用任意数量的参数,并返回最小值或最大值。它们可以在内部使用calc(),也可以彼此嵌套使用,并且两个函数都允许calc()在它们内部进行类似数学的运算。

对于这种情况,我们要使用max():

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

使用@supports来检测最小值和最大值是很重要的,因为并不是所有地方都支持它们,并且由于CSS 对无效变量的处理,因此不要在@supports查询中指定变量。

在我们的示例页面中,纵向显示env(safe-area-inset-left)为0px,因此该max()函数解析为12px。在横向模式中,env(safe-area-inset-left)由于传感器外壳而变大时,该max()功能将解析为该大小,以确保始终可见其中的重要内容。

在这里插入图片描述
经验丰富的Web开发人员可能以前曾遇到过“ CSS锁定”机制,该机制通常用于将CSS属性限制在特定值范围内。同时使用min()和max()会更容易,并且在将来实现有效的响应式设计时将非常有帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值