第 6 章 HTML 5 安全HTML 5 是 W3C 制定的新一代 HTML 语言的标准。6.1 HTML 5 新标签6.1.1 新标签的 XSSHTML 5 定义了很多新标签、新事件，这有可能带来新的 XSS 攻击。一些新 XSS Felter 如果建立了一个黑名单的话，则可能就不会覆盖到 HTML 5 新增的标签和功能，从而避免发生 XSS 。HTML 5 中新增的一些标签和属性，使得 XS
转载
2024-07-23 19:47:05
29阅读
# 在 iOS 上实现安全区域的 CSS：新手指南
在移动应用开发中，尤其是 iOS 应用，确保用户界面的元素不会被状态栏、导航栏或者其他界面元素遮挡是非常重要的。为了确保良好的用户体验，我们需要实现 iOS 的安全区域（Safe Area）。在这篇文章中，我们将逐步学习如何在 iOS 上使用 CSS 实现安全区域的样式。
## 实现流程概览
以下是实现流程的主要步骤：
| 步骤 | 描述
示例：iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。一、什么是安全区域？最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。幸运的是，在小程序上我们只需要考虑底部的底部Home Indicator上滑指示条。注意，官方不推荐我们粗暴的将这段区域永久的覆盖，例
转载
2023-07-31 23:51:51
937阅读
iPhoneX安全区域引发的问题(Safe Area)瞧一瞧LeetCode题解：Gitbook版本传送门
前端笔记：Gitbook传送门
目录什么是安全区域？预留出Home Indicator指示条简单总结一、什么是安全区域？最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。 幸运的是，在小程序上我们
转载
2023-10-02 10:56:54
513阅读
浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在解决兼容性问题前应该要知道什么标签属性引起什么问题，方可对症下药。所谓的知其然还要知其所以然，问题就会迎刃而解、事半功倍。 浏览器兼容问题的起因及解决办法 一：不同浏览器的标签默认的外补丁和内补丁不同（各自的margin 和padding差异较大）。 &nb
转载
2024-10-17 21:48:20
23阅读
先说我们为什么会使用到这个CSS底部布局解决方案： 当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。 对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。 下面是
转载
2024-10-17 16:23:26
78阅读
iOS11 系统发布后,UIView多了几个与安全区域相关的属性和方法,用于界面适配,如:safeAreaInsets、safeAreaLayoutGuide、insetsLayoutMarginsFromSafeArea,以及safeAreaInsetsDidChange方法,初看到这些时我眼花缭乱,不知其存在的意义何在.扪参历井仰胁息，以手抚膺坐长叹.这特么到底怎么用啊???经过不懈的努力,阅
转载
2023-10-01 16:14:40
1508阅读
防火墙安全区域及安全策略配置 一、学习目的掌握防火墙安全区域的配置方法掌握安全策略的配置方法 二、拓扑图 三、场景你是公司的网络管理员。公司总部的网络分成了三个区域，包括内部区域（trust),外部区域（untrust）和服务器区域（DMZ）。你设计通过防火墙来实现对数据的控制，确保公司内部网络安全，并通过DMZ区域对外
转载
2023-07-14 20:54:27
273阅读
一. 前言本文的出发点是对iOS设备的适配, 我们之前的适配只是考虑设备的尺寸, 设备的方向, 而在iPhoneX出来之后呢, 我们又多了一种考量, 那就是刘海和底部横条(HomeIndicator), 我们通过UIKit11.0之后新增的API来解决这个问题, 达到不同设备尺寸, 不同设备方向的完美适配. 二. 之前的做法 注: 该方法只适用于设备的竖屏, 如果是横屏就会出现
转载
2023-09-13 22:30:46
336阅读
安全区域？安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。 更详细说明，参考文档：Human Interface Guidelines - iPhoneXviewport-fitiOS11 新增特性，
转载
2023-10-17 10:28:42
238阅读
在处理移动Web开发时，特别是iOS系统上的Safari浏览器，有一个非常重要的概念，就是“底部安全区域”（Safe Area）。这是因为在某些iPhone上，由于屏幕边缘的设计，特别是刘海及底部的圆角区域，内容可能会被遮挡。本文将详细探讨如何通过CSS适配iOS的底部安全区域，确保我们的网站在各种设备上呈现一致的用户体验。
## 环境准备
在开始之前，我们需要确保安装必要的工具和库，以便为我
运行一下下面的代码，就知道精妙之处了！ 来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)<!DOCTYPE html>
<html>
<head&g
在HTML的语法中，颜色会以十六进位值(例如：#FF0000)或颜色名称(例如：Red)来表示。网页安全色是指在256色模式下，无论在Windows或Macintosh系统下，在Netscape Navigator和Microsoft Internet Explorer浏览器中都能显示相同的颜色。传统上有216种常用颜色，而任何结合00、33、66、99、cc和ff(RGB值分别是0、51、102
背景从苹果手机 iphoneX 发布之后，前端人员在开发移动端Web页面时，得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iphoneX 之后的苹果手机，在页面上，你需要对顶部和底部多预留一点空间。造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏，而且更是在屏幕下方加了一条小黑条。 我们上下预留的占位空间就是为了防止我们页面的内容被这些元素遮挡，但是如果你做的页面只
转载
2023-10-14 05:54:32
713阅读
前言自从iphoneX问世之后，因为iphoneX、iphoneXR和后续全面屏手机设备，因为物理Home键被底部小黑条代替了，这时候很多前端小伙伴在开发的过程都会遇到 “全面屏”和“非全面屏”的兼容性问题，普遍问题就是底部按钮或者选项卡与底部黑线重叠解释根据官方解释：
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑
转载
2023-10-01 16:14:35
616阅读
# CSS 去除 iOS 顶部安全区域
在现代移动网页设计中，iOS 设备的顶部安全区域（Safe Area）是设计师和开发者们必须关注的重要因素。尤其在 iPhone X 及之后的型号中，由于引入了缺口（notch），造成了页面内容可能会被安全区域遮挡。在这篇文章中，我们将探讨如何使用 CSS 去除或调整 iOS 顶部安全区域。
## 什么是安全区域？
安全区域是指在特定设备上，内容应该被
对于 iPhone 8 和以往的 iPhone，由于屏幕规规整整的矩形，安全区就是整块屏幕。但自从苹果手机 iphoneX 发布之后，前端人员在开发移动端Web页面时，得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iphoneX 之后的苹果手机，在页面上，你需要对顶部和底部多预留一点空间。造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏，而且更是在屏幕下方加了一条小
转载
2023-08-17 16:30:33
481阅读
一. 前言：苹果手机从iphoneX之后，屏幕顶部都有一个齐刘海，iPhoneX 取消了物理按键，改成底部小黑条，如果不做适配，这些地方就会被遮挡，所以本文记录一下齐刘海与底部小黑条的适配方法。二. 知识点学习1）viewport-fit iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：co
转载
2023-12-07 13:25:00
382阅读
过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域 Safe Area，而如今由于 iPhone X 及以上机型，屏幕上的“刘海”以及屏幕四周采用圆角的设计，对于开发者和设计师来说，这个刘海带给他们的是更多的麻烦。比如黄颜色的部分表示网页遮挡了，用户不可见的地方。iPhoneX 及以上机型取消了物理按键，改成底部小黑条，对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理
转载
2023-10-29 08:23:15
480阅读
iPhone X及以上机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作， 解决方案：一、在index.html中的head中添加如下代码<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
name="viewport"
content="width=d
转载
2023-07-24 23:27:15
499阅读
