iphoneX适配刘海屏
发布时间:2020-12-14 01:37:58 所属栏目:Windows 来源:网络整理
导读:解决:iPhoneX底部的黑色线条挡住底部按钮、菜单、等 ? 话不多说,赶紧附上代码: ?? ! DOCTYPE html html lang ="en" dir ="ltr" head meta charset ="utf-8" meta name ="viewport" content ="width=device-width,initial-scale=1.0,maximum-scale=1.0,use
解决:iPhoneX底部的黑色线条挡住底部按钮、菜单、等 ? 话不多说,赶紧附上代码: ?? <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title></title> </head> <style type="text/css"> *{margin:0;padding:0;} .page_div{ width: 100%; background-color: #cb63dd; position: relative; } .parent_div{ position: fixed; height: 40px; width: 100%; background-color: #fff; left: 0; right: 0; bottom: 0; } .son_div{ background-color: #f20b49; height: 40px; line-height: 40px; text-align: center; color: #fff; } #model_ul li{ color: #fff; border-bottom: 1px dashed #f5f5f5; padding: 12px 0; margin: 0 20px; list-style: none; } #model_ul{ margin-bottom: 400px; } .parent_div.iphonex{ --safe-area-inset-bottom: env(safe-area-inset-bottom); padding-bottom: calc(var(--safe-area-inset-bottom)); height: calc(60px + var(--safe-area-inset-bottom)); } </style> <body> <div class="page_div"> <div> <ul id="model_ul"> </ul> </div> <div class="parent_div"> <div class="son_div">我是底部固定div</div> </div> <div> <script type="text/javascript"> //给page添加内容 var model_ul=document.getElementById(‘model_ul‘); var html=‘‘; var model=[‘一句怼人的霸气说说句子,让人无力反驳!‘,‘一、根本不必回头去看咒骂你的人是谁?如果有一条疯狗咬你一口,难道你也要趴下去反咬他一口吗?‘,‘二、我把自己养这么好,不想便宜了任何人,面包我有了,凭什么找一个给不起我爱情,还想来分我面包的人。‘,‘三、余生没那么长,不用一味的付出,去惯得寸进尺的人,请忠于自己,活得像最初的模样。‘,‘四、卸下你的面具再来和我说话,我没有那个时间和精力去揣测你是否真心。‘,‘五、有些人,有些事。改变不了才知道自己是那么的渺小,涉足社会才感觉自己不应该清高。‘,‘六、你尽情的糟蹋自己,心疼的是爱你的人,那个让你变成这样的人是不会内疚的,说不定还在背后嘲笑你讽刺你,所以眼泪麻烦收一收,这么大了,不要丢人现眼。‘,‘七、没钱有没钱的烦恼,有钱有有钱的烦恼,活着有活着的烦恼,你怎么确定,死了就会没有烦恼?‘,‘八、其实我们可以将所有的问题归结为两种:一种是没饭吃饿的,一种是吃饱了撑的。‘,‘九、能知难而退是我的本事,用得着你在这指手画脚。碰不得的东西,最好别碰,惹不起我的人,最好别惹。‘,‘十、你不要想以后怎样,以后是以后的事情。人生不过百年,幕起幕落而已。‘,]; model.map(function(item,i) { html += ‘<li>‘+item+‘</li>‘ }) model_ul.innerHTML=html; // js移动端页面判断是否是iphoneX var parent=document.getElementsByClassName(‘parent_div‘)[0]; var isIphonex = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812; if (isIphonex) { parent.className += ‘ iphonex‘; //在原来的后面加这个 } </script> </body> </html> ? ? 一、Mac系统测试:能在本地测试 ? 二、windows系统测试:无法在本地测试出来, ? 总结:真机上是没问题的,windows系统上: window.devicePixelRatio === 3 //false window.devicePixelRatio //3.0000001192092896so:想在window系统测试那就把 window.devicePixelRatio === 3 舍去,最终iPhonex的精确度降低,所以还是真机适用才是王道。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Windows Batch读取文件并将行解析为标记和变量
- group-policy – 通过GPO设置二进制注册表设置
- Windows’reterstr’命令:排除包含特定字符串的结果
- remote-access – 如何使用PSEXEC远程运行多个命令?
- 如何创建一个独立的(没有DLL文件依赖项)C Builder控制台应用
- windows-server-2008-r2 – 如何验证Windows Server 2008 R
- wix – 如何运行具有提升权限的自定义可执行文件?
- 窗口 – 自动截取程序窗口的截图
- vbscript – Windows 7安装程序,刷新路径环境变量
- windows – BATCH:如何将包含’&’char的字符串回显到