![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
真是感觉无解了，唯一的出路就是出人头地，挣很多很多钱！
划水大师
前端开发工程师
|
BAT有限公司
职业挑战bug
获得徽章 0
- 今年28了，感觉压力好大啊，家里面妹妹每个月需要输血，后面如果要做手术的话，估计得百八十万，家境一般，父母想让我这两年赶紧先找对象结婚，后面他们只需要想妹妹的事了，可我没怎么谈过恋爱，结婚对我来说太难了，而且我这情况，又怎么适合去谈恋爱呢
![[捂脸]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
真是感觉无解了，唯一的出路就是出人头地，挣很多很多钱！
可我又不争气，在郑州工作五年，公司一直不给涨工资，一直是6k，每月存3k，这几年每年过年也只给家里了1w。今天晚上，给妈妈打电话，妈妈说现在医院输血，都需要献血证了，她和爸爸，一人都献血3次了，我说我也回去献血，妈妈说我太瘦，体格不行，别回去献血，可我作为哥哥，又怎么忍心看他们一直给妹妹献血呢。
回到出租屋，给爸妈在网上买了两箱牛奶，是我现在能做的事情了。
未来的路，该怎么走呢，唉，好焦虑啊。展开5410 - 适配刘海屏的方案有哪些呢？
适配刘海屏的方案主要集中在 CSS 和 JavaScript 的使用上，确保网页在刘海屏设备上能够正常显示内容。以下是几种常见的适配方案：
### 1. 使用 `env()` 函数
在 CSS 中使用 `env()` 函数来获取安全区域（safe area），确保内容不被刘海遮挡。
```css
body {
padding-top: env(safe-area-inset-top); /* 上部安全区域 */
padding-left: env(safe-area-inset-left); /* 左侧安全区域 */
padding-right: env(safe-area-inset-right); /* 右侧安全区域 */
padding-bottom: env(safe-area-inset-bottom); /* 下部安全区域 */
}
```
### 2. 媒体查询
利用媒体查询针对刘海屏设备进行特定样式调整。例如，可以检测手机的屏幕特性，来应用不同的样式。
```css
@media only screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
.container {
padding-top: 40px; /* 增加顶部内边距 */
}
}
```
### 3. 使用 JavaScript 检测
使用 JavaScript 来检测设备是否为刘海屏，并相应地调整页面布局。
```javascript
function isNotchScreen() {
const { innerWidth, innerHeight } = window;
return (innerHeight / innerWidth) > 2; // 根据比例判断是否为刘海屏
}
if (isNotchScreen()) {
document.body.style.paddingTop = '40px'; // 根据需要调整
}
```
### 4. 使用 Viewport Meta 标签
确保在 HTML 中使用合适的 viewport meta 标签。这对适配所有屏幕类型非常重要。
```html展开44
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)