mkimq

兼容性

提示

文档只介绍部分兼容问题，欢迎补充说明。

重置css样式

不同浏览器的标签默认样式不同，例如margin和padding，为了保持样式一直，重置样式很有必要

ios

  1. fixed定位缺陷

解决方案： 可用iScroll插件解决这个问题

  1. overflow: auto; IOS手机滚动卡顿
/* 有回弹效果 */
webkit-overflow-scrolling: touch;

兼容iphoneX iphone11底部横(黑)线距离

  1. viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

参数说明
contain可视窗口完全包含网页内容
cover网页内容完全覆盖可视窗口
auto默认值，跟 contain 表现一致

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

css 判断iphone安全距离，留出iphonex iphone11底部的横线距离 env属性只能在 viewport-fit=cover 时生效 env() 和 constant()

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no, initial-scale=1,viewport-fit=cover"/>
  1. iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
/* 这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。 */

这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  1. 底部tabbar代码
.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #f7f7f7;
    border-top: 0.01rem solid #d7d8da;
    z-index: 9999;
    /* tabBar原高度（60px改成你项目自己的值）+安全距离,兼容 iOS < 11.2 */
    height: constant(55px + env(safe-area-inset-bottom));
    /* 兼容 iOS >= 11.2 */
    height: calc(55px + env(safe-area-inset-bottom));
    /* tabBar留出底部安全距离, 兼容 iOS < 11.2 */
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    padding-bottom: env(safe-area-inset-bottom);
}
  1. 页面内容区域
.content-box-l{
    /* tabBar留出底部安全距离, 兼容 iOS < 11.2 */
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    padding-bottom: env(safe-area-inset-bottom);
}

阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

禁止 iOS 弹出各种操作窗口

-webkit-touch-callout: none

消除 transition 闪屏

-webkit-transform-style: preserve-3d;
贡献者: mankueng