期待你的关注和收藏 -
耳朵们要好好收藏
原文:Stephen Radford | 译:程琳琳
新的iPhone X具有美观的全屏显示。但是,在浏览器的顶端有一个小小的缺口,在默认情况下,横屏查看网站时,会出现横屏显示问题。
为了适应iOS 11顶部缺口,默认会将网站限制在屏幕上的“安全区域”内。使得浏览大多数网站时,出现左右侧出现白边。
庆幸的是有两个简单的解决思路。
一、背景色(background-color)
如果您的网站使用单一纯色作为背景,那么最适合您的解决方案就是用background-color在您的body代码上设置属性。上面的网站案例,就会得出以下结果:
正如上图所示:边距保持不变,只填充背景颜色
viewport-fit
如果您更喜欢对设计进行额外的控制,或者使用渐变或图像作为背景,则只设置一个 background-color可能还不可行。在最新版本的iOS中,Apple已经在CSS Round Display Spec中添加了viewport-fit的描述符。
只需添加viewport-fit=cover到您的meta标记,即可将您的网站扩大到填补整个屏幕,而不仅仅是安全区域。
这样使得上面的网站案例,得出以下结果:
显然,现在需要开发人员/设计师手动调整来适应屏幕的缺口。
safe-area-inset-*
为了处理可能需要的任何调整,iOS 11的Safari版本包含一些可以在使用时viewport-fit=cover使用的常量。
这可以被添加到margin,padding或诸如top、left一样的绝对位置值。我将以下内容添加到网站的主要容器中。
这完美解决了页面上菜单和社交媒体图标位置问题。
喜欢请点赞 分享朋友圈也是一种赞赏
G时代虽然现在消费者用电脑逛淘宝的的机会越来越少,但是对于很多还想入淘的新卖家来说,PC端装修在他们心中也是至关重要,其实PC端首页装修常见的模块无非就那几个,店招,导航,轮播海报,优惠券,全屏宽图等,其中淘宝pc端全屏海报尺寸宽度1920px,高度随意哈!
当然很多KA商家玩的可能会玩得更花,尤其是在618、双11这样的大促期间,加上各种的特效,比如下雪,雪花、元宝、花瓣等,看着很炫酷,间接增加店铺客户粘度。
今天帮一个做工业设备的朋友装修了一下PC端店铺首页,对于店招、轮播海报等这些网上教程有很多,没太多技巧,就那个方法,我就不赘述了,下面来说一下首页装修遇到的一个问题就是全屏海报之前空白间隙的问题,该如何去除呢?当然网上也是有很多教程的,也有工具可以去除的,但是按照这种方法操作肯定能够去除间隙。
很多首页装修的时候,全屏海报因为看着高端、大气、上档次,因此首页装修都是必不可少的,但是会出现海报与海报之前有空白间隙的问题,这个空白间隙一般是20px,当然,有很多美工装修助手都是可以直接去掉这些空白间隙的,但是几乎所有的装修工具都是收费的,那不借助这些收费的工具该如何去除呢?(最后分享一个免费的)
全屏海报的添加都是通过店铺装修后台左侧栏中基础模块中的自定义区模块添加的,如果大家稍微知道一些div+css的知识,不借助工具直接在DW里面写的话一般都会避免出现海报与海报之间间隙的问题。当然如果添加完海报在预览状态下出现留白间隙的话,很多时候都是借助工具生产的代码才会出现这种情况,出现白色间隙先返回装修页面点击右上角 "装修",进入自定义内容区,显示标题处 选择"不显示",然后点击“源码”,进入源码状态,按下图所示的1和2 两个步骤操作修改源码,可以完美去除海报之间的留白问题。
当然我截图的代码显示的是我这边height:710px, -20px 就是690px, 你的height是多少, 根据情况减20px就可以了。也就是说1和2步骤都是要减掉白色间隙的20px.
其实经常搞设计的美工,手里都会有几个经常用到的美工助手工具,而且网上有很多类似 这样的,免费的功能几乎都都能满足日常需要,更会为设计师节省不少时间。在这里就不再分享了哈,以免被误认为有打广告的嫌疑.
*请认真填写需求信息,我们会在24小时内与您取得联系。