西西木科技-专业的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和各项计算机语言。