用CSS里的 viewport-fit 标签应对iPhone X 的刘海
。或者，可以添加 viewport-fit=cover meta 标签，将整个网站扩展到整个屏幕。 ...
原文：前端：viewport-fit解决iphoneX的“刘海”问题
iphoneX的 刘海 为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了 被限制在了这样的 安全区域 内，两边会出现一道白条。解决的方案是： 给body添加一个background 添加viewport fit cover meta标签，使页面占满整个屏幕。 这样， 安全区域 将由你决定 look this :Stephen Radford 文档 为了处理这些需求，iOS ...
2017-11-03 15:22 1 22036 推荐指数：
相关推荐
css完美解决网页在iphoneX的头部刘海显示问题
一、解决iphonX白条,网站扩展到整个屏幕 网页在iphoneX的浏览器屏幕显示上，默认情况下在头部的2侧会出现白条背景，网站被限制在了一个“安全区域”内，移除白色背景的方法 方法一：设置body的背景色： 方法二：添加mate属性viewport-fit=cover ...
H5页面在iPhoneX刘海屏适配
前言 iPhone X和IOS 11的发布，不仅在许多技术方面造成了一定的冲击，前端也不可以避免地也受到影响，因为iPhone X刘海的影响，在编写前端页面的时候要做一些处理，下面先提出一些新的概念。 iphone介绍 iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大 ...
H5页面在iPhoneX刘海屏适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下： △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸： △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI ...
Cocos Creator 屏幕适配 （Widget，Fit Width， Fit Height，ShowAll，常用分辨率，刘海屏）
版本：2.3.4 一 竖屏手机适配 二 横屏手机适配 三 其他（百分比适配，ShowAll模式，游戏常用分辨率） 一 竖屏手机适配 游戏场景Canvas分辨率640x1080， 选择Fit Width ，Widget组件默认Top/Right/Bottom/Left都勾选 ...
Cocos Creator 屏幕适配 （Widget，Fit Width， Fit Height，ShowAll，常用分辨率，刘海屏）
版本：2.3.4 一 竖屏手机适配 二 横屏手机适配 三 其他（百分比适配，ShowAll模式，游戏常用分辨率） 一 竖屏手机适配 游戏场景Canvas分辨率640x1080， 选择Fit Width ，Widget组件默认Top ...
解决fit-content不兼容IE浏览器的问题
上一篇博客提到fit-content可以自适应宽度，但是这个属性只能在Chrome浏览器上使用，在Firefox上需要加上-moz-前缀。不能在IE浏览器上兼容， 通过研究发现，width:auto;可以代替这个属性，但是需要在最外层的父元素上面加上属性display:flex; 下图 ...
object-fit 解决图片指定大小被压缩问题
object-fit 解决图片指定大小被压缩问题 第一次遇到这个属性，是在给video 写 poster的时候,选取的作为poster的img的尺寸有点小，导致video播放器两边有留白。在控制台查看video默认样式的时候看到了这个属性。 chrome中默认是object-fit ...