西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
小知识web页面，大挑战！ 本文是参与《程序员必备知识》创作活动。
开始
自从iPhone开发以来shopify模板，其实说白了web页面；制作手机网页时，处理IOS的安全区域，这是继iphoneX之后的苹果手机。 在页面上，您需要在顶部和底部保留更多的空间。
出现这个问题的主要原因是苹果手机的屏幕上出现了所谓的“刘海”，在屏幕底部添加了一个小黑条。
如图所示：
我们上下预留的空间就是为了防止我们页面的内容被这些元素遮挡。 不过，如果你制作的页面只是放在部分浏览器（微信内置浏览器）中，一般我们不需要处理顶部刘海的问题。 ，顶部通常是原生标题栏，所以我们不需要担心。 但如果你的页面是嵌入在APP中显示的web页面，并且APP是全屏显示的，那么这个问题还是需要处理的。
下面我们分别介绍如何通过CSS和JS来处理。 您可以根据场景进行选择。
CSS
在iOS11的新功能中，Webkit包括两个新函数env()和constant()，以及四个预定义常量：
我们可以这样使用它们：
body{
/* 兼容 iOS < 11.2 */
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
/* 兼容 iOS >= 11.2 */
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);
}
当然，你也可以在固定在底部的元素上单独使用它：
div{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
JS
当然，有时候简单的CSS方法无法满足实际的需求场景，所以我们需要确定哪些iOS手机屏幕需要进行特殊处理。
iphoneX之后的苹果手机系列参数如下：
型号 放大倍率 分辨率 pt
iPhone X
2436×1125
812×375
iPhone XS
2436×1125
812×375
iPhone XS Max
2688×1242
896×414
iPhone XR
1792×828
896×414
基于这些参数，我们使用苹果手机的长屏，即屏幕的高度，作为判断条件：
/**
* 判断IOS异形屏
* @returns
*/
export function isIphoneX(){
if (typeof window !== 'undefined' && window) {
var faultTolerantVal = 10; // 容错值
return /iphone/gi.test(window.navigator.userAgent) && (window.screen.height + faultTolerantVal) >= 812;
}
return false;
};
至此，这篇文章就结束了shopify主题，让我们来献花吧。
我希望这篇文章对您有所帮助。 如果您有任何疑问，期待您的留言。
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。