css完美解决网页在iphoneX的头部刘海显示问题

时间: 2017-11-23阅读: 10368标签: css

一、解决iphonX白条,网站扩展到整个屏幕

网页在iphoneX的浏览器屏幕显示上,默认情况下在头部的2侧会出现白条背景,网站被限制在了一个“安全区域”内,移除白色背景的方法

方法一:设置body的背景色:

.body{
     background-color:#f00;
}

方法二:添加mate属性viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

说明viewport-fit有三个值:

contain:视口完全包括网页内容,这意味着fixed定位的元素被包含在了iOS 11的安全区内
cover:网页内容完全覆盖视口,这意味着fixed定位的元素将被固定到视口,即它们也可能会被覆盖,这恢复了我们在ios 10上的行为
auto:默认值,和contain相同

方法三:设置safe-srea-inset-*确保安全边界

改属性值适用于:margin、padding ,以及绝对定位的 top 或 left。以padding为例:

.page{
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}


二、实现元素滚动自动环绕iPhone X"刘海"

以下内容来源于http://www.zhangxinxu.com/wordpress/?p=6426

1.环绕齐刘海滚动实现原理

css Shapes中有个css属性名为shape-outside,可以让内联元素以不规则的形状进行外部排列,其语法如下(参考自MDN

/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url>值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

shape-outside属性要想生效,本身需要是浮动float元素。 本文demo效果实现使用的是shape-outside:polygon(),通过点坐标勾勒出和齐刘海形状相似的多边形形状,css代码为:

.shape {
  float: left;
  shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
}

列表元素就会自动环绕这个形状排列,也就是自动避开了齐刘海区域。 然后,只要搞个假的iPhone X的齐刘海图片覆盖在区域上就可以了。 至此,一个静态的列表环绕齐刘海的效果就完成了。 下面关键的问题是如何让滚动的时候,列表元素动态的跟着环绕呢? 由于shape-outside所在的元素是浮动元素,因此,必定会跟着容器一起滚动,我们需要的效果是我们所绘制的这个刘海区域需要是固定的,怎么办?此时,我是借助JavaScript处理的。 原理很简单,监听容器的滚动事件,让我们的shape-outside绘制的区域实时偏移滚动的大小。此时肉眼看上去的效果就是shape-outside区域永远固定在了滚动容器clientHeight的中间。 整个效果就这么实现了,相关js如下:

box.addEventListener('scroll', function () {
  var scrollTop = box.scrollTop;
  // 滚动偏移应用在shape-outside上
  shape.style.shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
});

更详尽的代码尽在demo页面

  

2.css Shapes环绕iPhone X刘海的其它更简易方法

如果我们的技术选型是更看重简单易懂,而不是资源消耗与占用,还可以使用shape-outside:url(image.png)语法实现类似的效果,其中'image.png'就是用来被环绕的图片,环绕与否是基于计算alpha通道决定,用句简单的话描述,就是沿着图片非透明区域环绕。 由于使用url()的形状计算是基于图片元素,和inset(), circle(), ellipse()或者polygon()这些基础形状方法的计算性质不一样,因此,可以直接使用垂直方向的margin进行偏移。这要比polygon()这样实时计算坐标位置要好理解的多。 我们不妨看下cssjs代码,如下:

.shape {
  float: left;
  shape-outside: url(liu-outside.png);
  margin-top: 150px;
}
box.addEventListener('scroll', function () {
  var scrollTop = box.scrollTop;
  // 滚动偏移应用在margin-top上
  shape.style.marginTop = (150 + scrollTop) + 'px';
});

可以看到,当我们滚动容器的时候,改变的就一个marginTop值就好了;而上面的 shape-outside:polygon()实现需要同时改变多个坐标值。

demo地址:shape-outside url实现列表环绕iPhone X刘海demo


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/160

react中使用css的7种方式

react中使用css的7种方式:在组件中直接使用style、在组件中引入[name].css文件、在组件中引入[name].scss文件、在组件中引入[name].module.css文件、在组件中引入 [name].module.scss文件、使用styled-components

关于CSS自文档的思考_css声明式语言式代码注释

当涉及到声明式的语言如CSS时,就发现了一些有趣的地方。声明式语言式必须符合对应格式的,而CSS选择器基本是由HTML结构决定的。对这种代码结构,我们能做的不多,这是否意味着CSS代码必须注释满天飞?

原来 CSS 这样写是会让 App 崩溃的

之前在自己的个人公众号中提到了一篇利用 CSS 的方式进行 XSS 攻击,当时有朋友跟我说,让我去获取那个网站的 cookie,再然后进入那个网站的后台去玩。然而,技术能力实在有限,搞不了这些东西

css更改后html不同步怎么解决?

我们通常编写HTML文件,并调用CSS文件实现布局美化时,经常出现明明已经修改过CSS文件,但HTML页面却并没有产生变化的现象。下面我们来看一下解决这种情况的方法。

为什么Web开发人员不用最新的CSS功能

尽管CSS每年都会发布全新的特性,但实际上这些新功能很少会被web开发人员实际在生产项目中使用到,甚至去了解它们的动力也不会比去多完成几个需求更多。那究竟是什么原因导致的呢?

深入理解letter-spacing,word-spacing的对比区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

20条书写CSS代码

在这篇文章中,我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手,而有些则更高级一些,但我希望每个人都可以在本篇文章中收获自己不知道的知识。

CSS中的一些细节

当position设置为:absolute或者fixed时,元素的display会转换为block。(设置float也会产生这样的效应)正常情况下,div会被内容撑开,但是如果设置了1.的情况下,父元素就会产生塌陷,失去高度。

不为人知的七个CSS知识点

如果你在日常工作中使用CSS,那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广