Question

我的目标是允许用户在暗模式和亮模式之间切换。当他们做出选择时，我想将元标记从default更改为black，反之亦然。

当前，我有服务器端代码，可根据用户对暗模式或亮模式的偏好来呈现apple-mobile-web-app-status-bar-style元标记。当用户更改模式时，无论我在服务器上渲染所应用的类名，都将提交表单，并以新样式刷新页面。例如在灯光模式下，我可能会遇到类似的情况。

<meta name="apple-mobile-web-app-status-bar-style" content="default" id="status-bar-style">
...
<div class="bg-blue-light"></div>

在黑暗模式下，服务器将返回类似的内容。

<meta name="apple-mobile-web-app-status-bar-style" content="black" id="status-bar-style">
...
<div class="bg-blue-dark"></div>

当用户在独立的Web应用程序中时，会出现问题。元标记似乎已被缓存。无论我做什么，除非用户重新下载Web应用程序，状态栏都不会改变。我尝试使用javascript替换meta标记并重新加载页面，但这也不起作用。

那么如何在Web应用程序内部动态更改apple-mobile-web-spp-status-bar-style元标记？

Answer 1

我不确定该程序是否可以正常工作，但是您可以将状态栏设置为半透明

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

并指定可以自动更改，测试并可以在iphone6s野生动物园上使用的主题颜色

 <meta name="theme-color" content="#ffd5f5">

并使用javascript自动更改主题颜色

function changeThemeColor(color) {
    let currentTheme = $('body').hasClass('theme-light') ? 'light' : 'dark';
    let metaThemeColor = document.querySelector("meta[name=theme-color]");  
    if(currentTheme === 'light'){
        metaThemeColor.setAttribute("content",color);                    
    }
    else{
        metaThemeColor.setAttribute("content","#21252a");
    }                       

}
// Can be called on button click and/or page load,

如何刷新Apple移动Web应用程序状态栏样式元标记？

1 个答案: