一、前期基础知识储备话不多说，这么多刘海屏手机今年集中爆发，所以尽管刘海屏不好看，但是还是要适配。2017年苹果X开启了刘海屏时代，2018年集中爆发，纷纷采取刘海屏这一策略来实现全面屏的概念（看36氪中的新闻，明年是5G元年，同时三星推出了折叠屏，未来的手机主流趋势是否会发生改变暂不得而知，但刘海屏不会退出市场，淡出视野这一点是确定的），所以Android手机对于刘海屏的适配也是比较重要的。所谓
转载
2023-12-05 17:00:32
433阅读
背景刘海屏指的是手机屏幕正上方由于追求极致边框而采用的一种手机解决方案。因形似刘海儿而得名。也有一些其他叫法：挖孔屏、凹口屏等，本文档统一按照刘海屏来命名。市场上已经有越来越多的手机都支持这种屏幕形式。谷歌在安卓P版本中已经提供了统一的适配方案，可是在安卓O版本上如何适配呢？本文将详细介绍华为安卓O版本刘海屏适配方案。使用华为提供的刘海屏SDK进行适配，此方案也会继承到华为安卓P版本手机上。在华为
转载
2023-07-09 21:10:47
270阅读
背景UI给出的设计稿，一般是以iphone6屏幕大小为准，也就是宽高为375 * 667，激进一些的还会使用414 * 736的设计稿。在其他不同尺寸的屏幕上适配的问题也就由此诞生，一般新搭建的项目都要处理这个问题。常见方案目前市面上比较常见的有两种方案：rem方案、viewport方案rem方案 通过计算屏幕宽度比，对html标签设置font-size为px，子元素都使用rem标识<scr
一、 交互上，慎用横屏展示效果。但是在今年的微信传播中，好的创意也可以尝试使用。
原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。
&nb
转载
2024-01-24 12:37:13
209阅读
概述有了HTML5，我们就可以在不借助Flash或者Silverlight的情况下完成这项工作了。HTML5能够使我们访问设备的硬件，比如GPS,WebGL等等。这篇文章，我们就来看看一个新的API——navigator.getUserMedia()，她允许网页应用去访问用户的摄像机和麦克风。getUserMedia之路第一阶段：HTML Media Capture当我们设置<input t
转载
2024-02-04 15:46:10
286阅读
在 iOS 刘海屏设备上，使用 H5 进行开发时，状态栏的背景色管理是一个常见问题。由于不同的设备和浏览器对状态栏的处理方式不同，这导致了开发者在设计时常常面临挑战。本文将详细阐述关于“ios刘海屏状态栏背景色h5”的解决方法及其相关问题，整个过程将涵盖版本对比、迁移指南、兼容性处理、实战案例、排错指南和性能优化等内容。
---
### 版本对比
在不同版本的 iOS 和使用的浏览器中，状态
# Android H5视频横屏实现指南
在这个指南中，我们将向您介绍如何在Android应用中的H5视频进行横屏展示。通过以下步骤，您将能顺利实现这个功能。
## 流程概览
为了帮助您更好地理解整个过程，以下是实现H5视频横屏的步骤概览：
| 步骤 | 说明 | 时间估算 |
|------|---------
# 在 Android 中实现 H5 视频横屏播放
在实现 H5 视频的横屏播放时，我们需要明确整体流程，以及需要用到的技术和代码。下面我将为你详细介绍整个过程，并提供必要的代码示例。
## 整体流程
以下是实现 H5 视频横屏播放的主要步骤：
| 步骤 | 说明 |
|------|------|
| 1 | 准备 HTML 页面，嵌入视频元素 |
| 2 | 添加 CSS
原创
2024-10-07 05:42:03
76阅读
移动端H5页面常见问题一
1.上下拉动滚动条时卡顿、慢 解决办法：添加样式body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}2.长时间按住页面出现闪退 解决办法：添加办法element {
-webkit-touch-callout: none;
}
转载
2023-07-17 18:19:25
253阅读
一、H5 的meta viewport<meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等，今天重点来说一下viewport。语法：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-
转载
2024-04-21 13:22:21
939阅读
前段时间做一个windows的桌面应用，vue + electron，涉及到录屏和摄像功能，网上相关的文档蛮少的给需要的人一些参考如果文章描写有误或者还有更好的方法，请留言告诉我，笔芯 (´▽`ʃ♡ƪ)背景介绍** 涉及技术：vue、electron、ffmpeg、node **关于录屏和摄像对比了两种方法使用HTML5的api实现摄像：mediaDevices(获取设备)+ getUserMed
shortEdgesAndroid O 适配因Google官方的适配方案到Android P才推出，因此在Android O（8.0版本）设备上，各家厂商有自己的实现方案。华为Android O适配方案一：具体方式如下所示：对Application生效，意味着该应用的所有页面，系统都不会做竖屏场景的特殊下移或者是横屏场景的右移特殊处理。例如：对Activity生效，意味着可以针对单个页面进行刘海屏
转载
2024-05-31 22:00:38
55阅读
参考文章Demo地址全屏状态下全屏的状态中,状态栏是不存在的,系统默认DecorView布局不会延申到刘海区域.设置全屏// 去除标题
requestWindowFeature(Window.FEATURE_NO_TITLE);
// WindowManager.LayoutParams.FLAG_FULLSCREEN: 让window进行全屏显示
getWindow().setFlags(Win
转载
2023-08-30 18:08:17
356阅读
网上关于刘海屏适配的文章不少，可讲清楚的却没几篇，大多是拷贝文档、长篇大论，甚至热情的贴图告诉你什么是刘海屏，到最后你仍不确定到底是怎样的一个适配方案，才能让你的 app 真正的适配所有的刘海屏机型。看到这篇文章你就无需再怨恨各大厂商的跟风“刘海”了，因为刘海屏的适配十分简单。ok，废话说完了，开始适配。首先要清楚的是哪些界面需要适配刘海屏：有状态栏的界面：刘海区域会显示状态栏，无需适配全屏界面：
转载
2023-10-13 23:09:09
204阅读
# 在Android中实现H5视频播放闪屏的完整流程
在现代的Android开发中，嵌入H5视频是常见的需求，但有时在播放时可能会出现闪屏现象，这是因为视频资源加载延迟造成的。本文将介绍如何在Android中实现H5视频播放，并解决视频闪屏的问题。我们将分步骤进行，并通过代码实现。
## 流程概述
下面是实现H5视频播放的整体流程表：
| 步骤 | 描述
在开发移动端网页时，如何判断iOS设备屏幕是否有刘海成为一个常见的技术难点。刘海屏的出现使得Web应用在呈现内容的时候需要进行相应的适配，确保用户体验的一致性。这篇博文将详细记录如何在H5页面中判断iOS屏幕是否存在刘海的过程，涵盖问题背景、错误现象、根因分析、解决方案等环节。
### 问题背景
在iPhone X及其后续机型中，刘海设计影响了网页的显示与布局。用户在撰写H5应用时，往往发现内
目录H5+CSS基础知识：Html简介（一）什么是HTML?（二）HTML 标签（三）HTML 元素（四）html5和html的区别（五）思考（1）title与h1的区别（2）b与strong的区别（3）i与em的区别（4）标签上title与alt属性的区别：（5）简述一下 src 与 href 的区别。（6）行内元素和块级元素有哪些：（7）行内元素和块级元素的区别：（8）display:non
前言目前市面上的刘海屏和水滴屏手机越来越多了，颜值方面是因人而异，有的人觉得很好看，也有人觉得丑爆了，我个人觉得是还可以。但是作为移动开发者来说，这并不是一件好事，越来越多异形屏手机的出现意味着我们需要投入大量精力在适配上(就不提之后会出的折叠屏手机了)。本文总结了当下主流手机的刘海屏适配方案，鉴于目前Android碎片化的情况，想要覆盖所有的机型是不可能的，但是能适配一些是一些，总比什么都不做要
转载
2024-08-15 15:23:17
118阅读
网易手机讯，2018年5月16日消息，在“刘海屏”手机逐步普及的今天，诺基亚也于今天带来了全新的X系列首款新机--诺基亚X6，售价1299元起。值得注意的是，未来诺基亚X系列新品也将针对中国消费者需求，专为中国市场用户而定制打造。诺基亚X6采用双面2.5D玻璃机身设计，搭载了5.8英寸19:9的FHD+“前刘海”全面屏，实现86%的屏占比，机身厚度控制在7.99mm，配合玻璃机身与金属中框的融合以
转载
2023-11-16 21:00:06
109阅读
前言公司最近要适配华为Pro20,没办法 – 。–一、AndroidP的适配方案上来我最先找到的就是AndroidP，就先以这个入手了。 首先看下谷歌给出的api，大致就分为两种。 1.设置全屏模式WindowManager.LayoutParams lp
=getWindow().getAttributes();
lp.layoutInDisplayCutou
转载
2023-11-25 05:54:12
532阅读
点赞
