iphoneX的适配问题

最新推荐文章于 2018-08-07 11:58:00 发布
最新推荐文章于 2018-08-07 11:58:00 发布
阅读量60 收藏
点赞数
原文链接：http://www.cnblogs.com/binmengxue/p/8891213.html
版权

iphoneX();
function iphoneX(){
var oMeta = document.createElement('meta');
oMeta.setAttribute('name',"viewport");
oMeta.setAttribute('content',"width=device-width,initial-scale=1.0,viewport-fit=cover");
document.getElementsByTagName('head')[0].appendChild(oMeta);
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ 

   body{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
   }

   .iphonex-pt{
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
   }
   .iphonex-pb{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
   }
   .iphonex-mt{
      margin-top: constant(safe-area-inset-top);
      margin-top: env(safe-area-inset-top);
   }
   .iphonex-mb{
      margin-bottom: constant(safe-area-inset-bottom);
      margin-bottom: env(safe-area-inset-bottom);
   }
   .iphonex-pl{
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
   }
   .iphonex-pr{
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
   }
   .iphonex-ml{
      margin-left: constant(safe-area-inset-left);
      margin-left: env(safe-area-inset-left);
   }
   .iphonex-mr{
      margin-right: constant(safe-area-inset-right);
      margin-right: env(safe-area-inset-right);
   }
   .iphonex-bd-top-bg{
      border-top: 88px solid transparent;
   }
   .iphonex-bd-top{
      border-top: 44px solid transparent;
   }
   .iphonex-bd-bottom{
      border-bottom: 34px solid transparent;
   }

}

3.js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){

        $(".phonex-pb").css("padding-bottom","34px");
}

转载于:https://www.cnblogs.com/binmengxue/p/8891213.html

weixin_30888027
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iphoneX移动端适配问题
C__Two的博客
06-08 715
iphoneX移动端适配问题 前言 iPhoneX 取消了物理按键，改为刘海屏，这一改动导致网页出现了适配问题。对于网页而言，顶部刘海部位的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 下面是整理的移动端适配方案，希望对大家有所帮助，处理前后效果如图： 适配之前需要了解的新知识 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑
iPhone X适配
不怕梦想跌倒，就怕没有梦想
10-26 561
公司app适配起来比较麻烦，很多第三方库编译的时候没有支持模拟器的版本，所以我只好把这些库删掉，然后调试界面后再加进去，是不是听起来就很无语。 适配iPhone X给我带来的最大教训就是：千万不要写死代码，之前用了很多20，49，44，诸如此类的高度，导致我不得一一改掉，而且吧，如果是多人合作的app，一开始就要说好一些常用的变量放在哪，不要每次你加一个，我加一个，不但重复后期还会有很多
iphoneX适配！！！
weixin_30472035的博客
03-21 65
方法1.js判断（以下采用Jquery） //适配iphonex if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ $(".end-page").addClass("step-page-x...
js 手动插入meta标签和script标签
weixin_30687051的博客
08-07 1011
// 插入 meta 标签 var oMeta = document.createElement('meta'); oMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=0'; ...
js中setAttribute 的兼容性
weixin_30216561的博客
02-20 135
class和className兼容方法： object.setAttribute("class","content") 在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。 object.setAttribute("className","content") 只有IE7能设置成功，但是其他浏览器均无法设置。 兼容方法： 使用object.classNa...
iPhoneX适配
02-11
在iOS开发中，适配iPhone X是至关重要的一步，因为iPhone X引入了许多新的设计元素，如无边框屏幕、刘海屏（Notch）以及安全区域（Safe Area）。本篇文章将详细探讨如何进行iPhone X以及类似机型的适配，主要包括...
有关HTML5页面在iPhoneX适配问题
09-27
主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下
iOS 适配iPhone X的方法
08-28
iOS 适配iPhone X的方法主要是为了解决iPhone X独特的刘海屏幕设计带来的适配问题。iOS 11之后，系统深化了“安全区域”概念，安全区域就是从屏幕上切除最大的矩形之外的区域。为了适配iPhone X，开发者需要了解iOS ...
iPhoneX无导航栏页面适配问题解决方案
08-28
在iOS开发中，尤其是针对iPhone X及其后续机型（如iPhone XS、XR、XS Max等），开发者经常遇到的一个挑战就是无导航栏页面的适配问题。这些设备采用了全新的设计，引入了"安全区域"的概念，以避免内容被顶部的刘海屏...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp38-cp38-win_amd64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
[毕设]高效人事考勤管理系统.zip
07-27
[毕设]高效人事考勤管理系统
人力资源培训.HR如何与业务部门进行沟通.ppt
07-27
人力资源培训.HR如何与业务部门进行沟通.ppt
毕业设计：基于Springboot的健身俱乐部网站 PPT
07-27
随着社会发展，健身俱乐部的管理面临日益严峻的挑战。众多用户倾向于通过互联网获取信息，但健身相关信息繁杂且真伪难辨。为便于用户更有效地获取本健身俱乐部的管理信息，设计一个既安全又高效的官方网站显得尤为重要。 本文旨在打造一个安全、简洁的健身俱乐部网站，助力用户快速查找健身课程、健身器材、会员卡详情及新闻公告等信息，以解决当前健身俱乐部管理信息混乱、难以辨识的问题。该系统基于Spring Boot架构技术，运用Java编程语言与MySQL数据库进行开发设计。通过对健身俱乐部业务流程的深入分析，我们明确了其功能性和非功能性需求，并据此设计了包含个人用户、管理员和教练三大模块的健身俱乐部网站。 此系统不仅为用户提供了一个便捷实用的健身俱乐部在线平台，使他们能够迅速找到适合自己的健身俱乐部，还允许用户浏览健身课程和器材信息，并支持在线留言功能。同时，管理员可通过后台管理系统轻松管理用户和教练的信息，亦能发布在线留言，以便用户及时获取最新的健身课程信息。如此，用户便能安全、高效地获取健身俱乐部的管理信息。
pillow-10.4.0-pp310-pypy310_pp73-manylinux_2_17_aarch64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
美团iOS App适配iPhone X：挑战与解决方案
总结来说，美团技术团队在iPhone X适配过程中不仅关注视觉上的变化，更深入理解了iOS系统的新规范，通过精细的设计和代码调整，确保了App在各种场景下的稳定性和功能性，展示了他们在应对新兴技术挑战时的专业能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值