WWDC2019 ------iOS13适配（持续更新）

第一、Web Content适配

https://developer.apple.com/videos/play/wwdc2019/511/

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

问题展示

先看两张图：

如上图所示，如果h5未适配dark模式，则在dark模式下原来的页面内容展示就就存在问题。

适配方法

这里主要介绍基于CSS样式的修改来适配web内容

首先，一定要声明当前支持的color-scheme有两种样式，这一句很重要，用东北话说就是“必须的”

:root {
    color-scheme: light dark;
}

适配的策略就是为两种color-scheme设置不同的颜色样式。

1、文本适配

如图一，它的CSS描述为

 body {
     color: black;
 }
 h1 {
     color: #333;
 }
 .header {
    background-color: #593a78;
    color: white;
 }

这里相关的颜色样式都是写死的，所以dark模式下才会出现图二的情况。现在我们来看如何适配下面这段代码：

h1 {
    color: #333;
}
.header {
    background-color: #593a78;
    color: white;
}

然后可用如下方式改造：

:root {
    color-scheme: light dark; 
    --post-title-color: #333;
    --header-bg-color: #593a78;
    --header-txt-color: white;
}


h1 {
    color: var(--post-title-color);
}
.header {
    background-color: var(--header-bg-color);
    color: var(--header-txt-color);
}

这里所做的工作实际上是抽象了颜色的值的setter和getter，即不同模式下的值统一定义，然后使用时通过var()去自动获取。

而结合@media与prefers-color-scheme,颜色值的定义可以更加清晰：

@media (prefers-color-scheme: dark) {
    :root {
        --post-title-color: white;
        --header-bg-color: #513d66;
        --header-txt-color: #eee;
    }
}

同理可以定义light模式下的色值。

2、图片适配

假设原文件有一幅图片资源，其CSS描述如下：

<img src="mojave-day.jpg">

那么，可以通过下面的方式来达到适配两种模式的目的：

<picture>
    <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
    <img src="mojave-day.jpg">
</picture>

3、动态内容适配

动态内容适配需要注意：WebKit提供了获取指定模式下需要适配的多媒体项的能力，以及不同模式间切换的通知，一般情况下，通过下面的方式可以完成适配：

// Adapting dynamic content to dark mode with JavaScript
let darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
function updateForDarkModeChange() {
    if (darkModeMediaQuery.matches) {
        ...
    } else {
        ...
    }
}
darkModeMediaQuery.addListener(updateForDarkModeChange);
updateForDarkModeChange(); // Handle if Dark Mode is already active.

所以，这里很显然要处理light2dark和dark2light等情形。   

如果需要更深度的定制，需h5与客户端评估是否需要注入js变量来判断当前模式。如果涉及服务端的直接适配，则可考虑在UA中添加识别信息。

4、小结：

• 使用 color-scheme 来声明支持的模式；
• 利用prefers-color-scheme来设置不同模式下的配置；
• 利用<picture> 标签设置不同模式下的图片；
• 利用var() 方法来适配不同模式下的变量取值；
• 动态内容适配视具体情况而定。