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() 方法来适配不同模式下的变量取值;
  • 动态内容适配视具体情况而定。

 

发布了27 篇原创文章 · 获赞 5 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览