设为首页   收藏本站
网上百家乐网站
当前位置: 网上百家乐网站 > 新闻焦点 > 万博体彩有app吗 - iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性解说

万博体彩有app吗 - iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性解说

时间: 2020-01-10 13:07:13
分享:

万博体彩有app吗 - iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性解说

万博体彩有app吗,苹果的 iphone x 配备了一个覆盖整个手机的全屏幕,但是顶部保留了一个“凹槽”,为相机和其他各种组件腾出空间。结果是屏幕设计时有一些尴尬局面,例如将网站限制在“安全区域”,那么边缘会有白色空白条。想要移除这个白色空白条虽然不难,在 body 设置一个 background-color 就可以搞定。或者,你可以 viewport-fit=cover 添加到 meta viewport 标签上,以使网页填充满整个屏幕。

html代码:

然后,你要考虑到任何重叠的情况,通常是由安全区域处理的。有一些新的css可以帮助你适应这种情况。

为了处理可能需要的任何调整,ios 11 的 safari 版本引入了一些常量,可以在使用 viewport-fit=cover 时使用。

safe-area-inset-top :视口顶部到安全区域的距离(以css像素为单位)。

safe-area-inset-right :视口最右边到安全区域的距离(以css像素为单位)。

safe-area-inset-left :视口最左边到安全区域的距离(以css像素为单位)。

safe-area-inset-bottom :视口底部到安全区域的距离(以css像素为单位)。

这些值可以应用到 margin , padding ,或者绝对(absolute)定位的 top 或 left 上。

它们可以通过 css 的 constant() 函数转换成我们常用的属性值,例如, 我将以下内容添加到网站上的主容器中。

css代码:padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

凹槽,安全区域和固定(fixed)定位还会造成另一个尴尬局面。

ios 11与早期版本不同之处在于 webview 内容现在遵循安全区域。这意味着如果你的 header 是一个的 top 设置为 0 的固定(fixed)定位的元素,它将被初始渲染在离屏幕顶部向下 20px 的位置, 对齐到状态栏的底部。当你向下滚动页面时,它会在状态栏后面移动。当你向上滚动,它将再次滑到到状态栏的下方(网页内容会在那条尴尬的 20px 的缝隙中显示)。

你可以在下面这个视频看到有多糟糕:

幸运的是,将 viewport-fit=cover 添加到 meta viewport 标签就可以轻松修复。

关于 viewport-fit

viewport-fit可以设置可视窗口(visual viewport)的大小。在设备的物理屏幕上看到的初始布局视窗。在圆形屏幕上,当前屏幕上显示的部分是圆形的,但是viewport却是矩形的。因此,根据viewport的大小,页面的某些部可能被剪切。

viewport-fit 接受三个值:

auto:这个值不影响初始布局视窗,整个web页面是可视的。在视窗之外的ua绘制的是未定义的,它可能是画布的背景色,或者是ua认为合适的其他东西;

contain:最初的布局视窗和视觉布局视窗被设置为最大的矩形。在viewport之外的ua绘制的是未定义的,它可能是画布的背景色,或者ua认为合适的其他东西;

cover:初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形;

css constants 示例

假设你有一个固定(fixed)定位的标题栏,在 ios 10及之前的 css 目前看起来像这样:

css代码:

header {

position: fixed;

top: 0;

left: 0;

right: 0;

height: 44px;

padding-top: 20px; /* 状态栏高度 */

要使 iphone x 和其他 ios 11 设备自动进行调整,您可以将 viewport-fit=cover 添加到 meta viewport 标签,并更改 css 来引用常量:

css代码:

header {

/* ... */

/* ios 10 上 状态栏高度 */

padding-top: 20px;

/* ios 11+ 上 状态栏高度 */

padding-top: constant(safe-area-inset-top);

对于不能识别 constant() 语法的旧设备,请保留备用值。您也可以在css calc() 表达式中使用常量。

iphone x 在 portrait 模式下(竖屏)状态栏和url地址栏会有一定的透明度,所以他们会显示半透明的网页背景色 background。

这与 android 上的 chrome 渲染 theme-color meta 标签类似,以便在状态栏中使用网页的主要颜色。

html代码:

如果你要覆盖整个可视窗口(viewport),那么你可能需要一点点小技巧才能避免隐藏内容!具体实现,关注蚂蚁社区,我们下次讲解!

相关新闻
热点新闻
© Copyright 2018-2019 devrijplaats.com网上百家乐网站 Inc. All Rights Reserved.