之前一直用框架开发,很多细节不需要自己处理,现在自己写样式的话,苹果的样式就出现独有的情况了,记录下。

1.消除iphone默认的输入框样式

{
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

2.适配iphone安全区域

css代码:

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

还需要配置在meta标签中配置:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover">

其中的 viewport-fit=cover 就是需要配置的值。否则上述的css代码无法生效。

3.iphone其它一些meta标签

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>