前端：viewport-fit解决iphoneX的“刘海”问题
iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内，两边会出现一道白条。解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕 ...
原文：用CSS里的 viewport-fit 标签应对iPhone X 的刘海
iPhone X 配备一个覆盖整个手机的全面屏，顶部的 刘海 为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景：网站被限制在一个 安全区域 ，在两侧边缘会出现白条儿。移除这个白条儿也不难，给 body 设置一个 background color就可以搞定。或者，可以添加 viewport fit cover meta 标签，将整个网站扩展到整个屏幕。 然后就由你来决定被安全区域制约的 ...
2018-12-06 14:56 0 1548 推荐指数：
相关推荐
兼容iphone x刘海的正确姿势
在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。 那么是不是 ios11 以下就用不了这些了呢？是的，但你见过 iphone x+ 有 ios 11以下的吗？ 所以我们可以愉快的搞下去。 开始之前我们先了解什么是 safe area ...
iPhone X的缺口和CSS
苹果公司（Apple）的发布会也开完了，新产品也将登陆了。估计很多开发人员看到iPhone X的设备是要崩溃了，特别对于前端开发人员更是如此。 iPhone X的屏幕覆盖了整个手机的屏幕，为相机和其他各部件留出了一个空间。结果是屏幕设计出现了一些尴尬的情况。比如将网站限制在一个“安全区 ...
关于 iphone H5刘海屏适配
默认刘海屏的webview是有安全区域的，加上viewport-fit=cover属性后webview会全屏，全屏后为了适配刘海屏加上安全区域 padding-top: 1rem;//android样式 padding: env(safe-area-inset-top ...
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 ...
CSS——viewport视口及设置
一、viewport视口 在移动端，viewport视口就是浏览器显示页面内容的屏幕区域。 viewport视口有两种视口，分别是 visual viewport(可视视口)和layout viewport(布局视口)： （1）visual viewport固定大小跟屏幕大小相同 ...
uni-app - 刘海屏(Iphone X)底部横杠(——)白色区域块（安全距离处更改颜色）解决方案
前言 场景：因为要做无 tabbar 页面，所以在配置文件中取消底部导航栏。 取消后，iPhone X(刘海屏) 底部就出现如下图所示白色安全区域问题：这个问题，是因为 uni-app 默认会为 iPhone X(刘海屏) 留出安全距离，这个 安全距离的背景色就是白色 ...