移动端适配我们需要做哪些事情? 一个最佳实践除了设置
关于viewpoint-fit在切入正题之前,我们先展开介绍一下
最初的布局视窗是通过物理设备的屏幕进行计算,如下图所示: 圆形的屏幕上上显示的页面的一部分,目前是圆的但视窗是长方形的。因此,根据窗口的大小,页面的某些部分可以省略。
在非矩形显示器上设置视口边界框的大小时,我们必须考虑以下因素:
开发者可以决定哪个因素比另一个更重要。 如果必须保证网页的任何部分都不被隐藏,则避免剪切比在视口的边界框和屏幕边界之间留有间隙更重要。 如果开发者不希望网页因可读性而变小,那么最好将 示例演示为了方便理解,下面是针对 当使用 @viewport (viewport-fit: contain) { /* CSS for the rectangular design */ } 当使用 @viewport { viewport-fit: cover; } @media (shape: round){ /* styles for the round design */ } @media (shape: rect){ /* styles for the rectangular design */ } 安全区域适配根据上文所述,为了安全区域不影响页面渲染,我们可以使用 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> 识别刘海屏ios识别刘海屏比较容易,我们可以通过计算屏幕的宽度和高度来快速识别。首先我们罗列一下iPhone现有机型的屏幕尺寸:
screen.width === 375 && screen.height === 812 或 screen.width === 414 && screen.height === 896 完整的代码如下: function deviceDetection() { const ua = navigator.userAgent let osVersion = '' let device = '' try { if (/android/i.test(ua)) { device = 'android' osVersion = ua.match(/Android\s+([\d.]+)/i)[0].replace('Android ', '') } else if (/ipad|iphone|ipod/i.test(ua)) { device = 'ios' osVersion = ua.match(/OS\s+([\d_]+)/i)[0].replace(/_/g, '.').replace('OS ', '') } } catch (err) { /* istanbul ignore next line */ console.error(err) } return { osVersion, device } } // 判断是否为刘海屏 export function isFringe() { const { device } = deviceDetection() const { screen } = global return device === 'ios' && ((screen.width === 375 && screen.height === 812) || (screen.width === 414 && screen.height === 896)) } 此外,Android端虽然刘海屏机型较为杂多,但我们习惯容器上会把状态栏的高度和刘海对齐,从而不影响内容的展示 |
|