IphoneX底部适配

更新日期: 2019-05-21阅读: 3.3k标签: 适配

1.判断是否是IPhoneX手机

let isIphone = /iphone/gi.test(window.navigator.userAgent)
  let windowW = window.screen.width
  let windowH = window.screen.height
  let pixelRatio = window.devicePixelRatio

  let isIPhoneX = isIphone && pixelRatio && pixelRatio === 3 && windowW === 375 && windowH === 812
  let isIPhoneXSMax = isIphone && pixelRatio && pixelRatio === 3 && windowW === 414 && windowH === 896
  let isIPhoneXR = isIphone && pixelRatio && pixelRatio === 2 && windowW === 414 && windowH === 896

  if (isIPhoneX || isIPhoneXSMax || isIPhoneXR) {
    // 底部增加fix-iphonex-bottm 样式
    $(".contact-box").addClass('fix-iphonex-bottom')
    // 底部增加iphone-footer-bg样式 初始none,条件满足block
    $(".iphone-footer-bg").addClass('iphonexshow')
  }


2.增加fix-iphonex-bottom样式

.fix-iphonex-bottom {
  bottom: 34px !important;
}

如果想更改IPhoneX底部34像素的背景颜色怎么办呢?


3.增加iphone-footer-bg样式

.iphone-footer-bg {
  height: 34px;
  background: #6D6D6D;
  width: 100%;
  position: absolute;
  bottom: -33px;
  display: none;
}
.iphonexshow {
  display: block !important;
}

链接: https://www.fly63.com/article/detial/3799

如何针对 iPhone X 设计网站?

在全面屏的 iPhone X 上,不需要而外的代码,Safari 可以非常完美的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内,并不会被四周的圆角或者“小刘海”遮挡住。

Web 端屏幕适配方案

像素 :像素是屏幕显示最小的单位。设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

移动端前端适配方案总汇

关于移动端适配的技术方案主要有以下四种:(1)通过媒体查询的方式即CSS3的meida queries(2)以天猫首页为代表的 flex 弹性布局(3)以淘宝首页为代表的 rem+viewport缩放(4)rem 方式

移动端兼容适配的分析

网站适配的终端可以用js或媒体查询的方式获取,分配对应的样式。布局上采用相对单位,百分比和flex的弹性方式。对移动端的特殊性进行适配,如1px问题,默认样式等。

em与rem之间的区别以及移动设备中的rem适配方案

em与rem之间的区别:共同点:它们都是像素单位,它们都是相对单位。不同点:em大小是基于父元素的字体大小,rem大小是基于根元素(html)的字体的大小

React Native之图片/宽高/字体平台适配

为了提高代码的兼容性,我们有时需要判断当前系统的平台,然后做一些适配。比如,我们在使用 StatusBar 做导航栏的时候,在 iOS 平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏

基于Vue/React项目的移动端适配方案

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率。

移动端适配

首先是名词介绍:像素:Pixel,就是物理像素:也就是设备像素,逻辑像素:(css像素)单位为 px设备像素比:devicePixelRatio,(在高倍屏会出现1px变大的问题)。css单位em:相对于当前对象内文本的字体尺寸

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!