移动端横竖屏适配与刘海适配

3,825 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

横竖屏适配

利用JSCSS都可以做到,这里我们说下CSS怎么做

@media screen and (orientation:portrait){
    #box{
        background: red;
    }
}
@media screen and (orientation:landscape){
    #box{
        background: green;
    }
}
  • screen 屏幕
  • orientation 方向
  • portrait 竖向
  • landscape 横向

刘海适配 iphoneX 为例

image.png

iphoneX首先提出刘海屏概念的时候,打了所有软件一个措手不及,例如上面的王者荣耀,完全看不见金币有多少,也很难点击到,如果我对面有个iphoneX的对手,那简直就是福利局。

所以起初,我们如何适配iphoneX就是个很头疼的问题了。

不过毕竟iphoneX是个主流手机,为了更好的支持它,软件商纷纷拿出自己的方案,一直到现在,其实iphoneX的刘海在我们只做网站的时候,已经不会产生太大的影响了。

image.png

所以对于移动端来说,顶部的适配,我们已经不需要去处理啦,但是底部以及左右两侧,我们就要考虑下了

安全区

image.png

上面这个图,就是我们的安全区,保证内容是在安全区内进行显示的,会比较好,不容易发生遮挡、显示不全等问题。

image.png

利用iphoneX专属样式viewport-fit属性,他会对网页设置安全区

<meta name="viewport" content="viewport-fit=cover>
  • cover
  • contain

配合css方法

body{
    padding-bottom:constant(safe-area-inset-bottom);
    padding-bottom:env(safe-area-inset-bottom);
}
  • constant:小于IOS11.2版本生效
  • env:大于IOS11.2版本生效

image.png

可以看到下面出现了一块内容,这次黑色的这条线,就不会挡住我们的文字或其它内容了。

  • safe-area-inset-lef 设置左侧安全区
  • safe-area-inset-right 设置右侧安全区
  • safe-area-inset-top 设置顶部安全区
  • safe-area-inset-bottom 设置底部安全区

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页