返回

eBay iOS深色模式商品详情页样式错乱解决及兼容性分析

IOS

eBay iOS App 深色模式下商品详情页样式错乱的解决之道

最近遇到个烦心事儿:在 eBay iOS App 上,如果 iPhone 开启了深色模式,我精心设计的商品详情页直接就崩了,变成一团难看的粉红色!这谁顶得住?

白天效果图 链接

夜晚/深色模式效果图 链接

你看这对比,背景颜色、字体、emoji,甚至连图片都变色了!我尝试了各种方法来解决,都快崩溃了,最后总结下来了.

问题根源探究

这事儿肯定不简单,要搞清楚几个问题:

  1. eBay App 用的啥浏览器内核? iOS 上的 App,不管看着多花哨,底层用来显示网页内容的,是不是都得用 Safari 的 WebKit? 还是说用的是 WKWebView?

  2. eBay 是不是“魔改”了样式? 如果用了 WKWebView 这类控件,App 是有能力注入自定义样式的。 问题是,eBay 如果真这么干了,我们这些卖家怎么才能覆盖掉它的设置,保住自己的样式?

  3. eBay 是怎么过滤代码的? 编写的<head> 会被eBay删除掉,但是meta却可以保留下来, JS 直接就被禁用了,其他的一些标签呢? 也是很疑惑。

解决思路及方案

既然遇到了问题,就得想办法解决。我整理了以下几个思路,每个都试过,有的有点用,有的完全没戏。

1. 尝试禁止深色模式

我想,最简单的办法就是直接告诉浏览器,我不支持深色模式!

  • 原理: HTML 有个 meta 标签,color-scheme,可以用来声明页面支持的颜色模式。
  • 操作: 在 HTML 的 <head> 里加上 <meta name="color-scheme" content="only light">
  • 代码示例:
<head>
  <meta name="color-scheme" content="only light">
  <!-- 其他内容 -->
</head>
  • 结果: 没用。 eBay 把 <head> 标签整个删了,但神奇地保留了 <meta> 标签。
  • 附加说明
    这样处理过, 在Safari浏览器可以正确显示. 但 eBay App不行。

2. CSS 强制 color-scheme

如果 HTML 不行,试试 CSS?

  • 原理: CSS 也有个 color-scheme 属性,可以直接设置。
  • 操作: 在 CSS 文件里加上 :root, * { color-scheme: only light !important; }
  • 代码示例:
:root, * {
  color-scheme: only light !important;
}
  • 结果: 还是没用。eBay App 依然我行我素。

3. !important 大法

再加把劲,把 CSS 规则都改成 !important,看看能不能压过 eBay 的设置。

  • 原理: !important 可以提高 CSS 规则的优先级。

  • 操作: 把所有相关的 CSS 规则都加上 !important

    • 修改前:
        .myClass { color: blue }
      
    • 修改后
       .myClass { color: blue !important; }
      
  • 结果: 依旧没用。看来 eBay App 不是吃素的。

4. 直接修改 html, body 背景

既然动不了全局,我就直接改 htmlbody 的背景色,总行了吧?

  • 原理: 直接给这两个根元素设置背景色,希望覆盖掉 eBay 的修改。
  • 操作: 设置 html, body { background-color: #ffffff !important; }
  • 代码示例
html, body {
  background-color: #ffffff !important;
}
  • 结果: 没起作用。eBay 还是能改掉我的背景。

5. 更“狠”的背景设置

光设置 background-color 还不够,再加个渐变背景试试。

  • 原理: 用渐变背景,增加覆盖 eBay 设置的可能性。
  • 操作: html, body { background-color: #000000 !important; background-image: linear-gradient(#ffffff, #ffffff) !important; }
  • 代码示例
html, body {
  background-color: #000000 !important;
  background-image: linear-gradient(#ffffff, #ffffff) !important;
}
  • 结果: 仍然失败。

6. “重置” eBay 的容器样式

我发现 eBay 会把我的整个商品包在一个 <div class="x-item-description-child"> 里面。能不能直接把这个容器的样式全“重置”掉?

  • 原理: 利用 all: initial 重置所有 CSS 属性。
  • 操作: .x-item-description-child { all: initial; }
  • 代码示例
.x-item-description-child {
 all: initial;
}
  • 结果: 毫无作用。eBay,你赢了!

7. 强制刷新 CSS 缓存

会不会是缓存搞的鬼?我试试强制刷新 CSS 文件。

  • 原理: 给 CSS 文件链接加个版本号,强制浏览器重新加载。
  • 操作: 把链接改成 <link rel="stylesheet" href="style.css?v=12345"> 这种形式。
  • 代码示例
 <link rel="stylesheet" href="style.css?v=1234">
  • 结果: 还是老样子,没变化。

8. 自定义深色模式样式 (有效的方法)

上面尝试过的方法都没有解决掉问题, 那我们可不可以"顺应"深色模式, 自定义样式.

  • 原理: 使用 @media (prefers-color-scheme: dark) 查询当前是否处于深色模式。如果处于深色模式, 则使用特定的CSS来重新设定.

  • 操作: 将你需要自定义的样式加入如下代码中

  • 代码示例

@media (prefers-color-scheme: dark) {
  /* 编写你的自定义样式  */
  .myElement {
     background-color: #333;  /* 假设你要设置某个元素的背景为深色 */
     color: #fff;      /* 字体为白色 */
   }
}

  • 结果: 在浏览器中调试时有用。 但在 eBay app 中同样没生效。 推测可能 eBay 内部禁用了 @media 或者有自己的实现方式。但通过这种方式, 可以在编写时留意可能会受影响的元素.

优化颜色反转和图像效果

由于 eBay App 可能会自动调整颜色和图片,需要特别留意这方面。

  • 颜色: 尽量避免使用纯黑 #000000 和纯白 #ffffff。 稍微调整一下,比如用 #0a0a0a#f2f2f2,有时可以避免被强制反转。
  • 图片: 如果图片也被“污染”了,考虑把重要的颜色信息做到背景图上,然后用 CSS 把图片设置为半透明或者用滤镜调整。
  • 操作: 图片进行base64转换。这样或许有奇效.

进一步的猜测和实验

到这一步, 其实可以猜出一些内容. iOS上的App 通常都用 WebKit内核的浏览器引擎(可能用了 WKWebView) 来呈现网页。 这代表一些特别的操作其实都受限了。
可能通过: Javascript document.styleSheets 得到eBay注入的CSS, 进一步调整.
我目前没找到有效的检测手段, 只能说 eBay 这么做有安全方面的考虑, 禁掉 JS,防止了一些恶意代码。

对 Android App 的影响

虽然这次的问题出在 iOS App 上,但我有点担心 Android App 是不是也有类似的问题。 理论上讲, Android 没有像 iOS 强制要求统一内核,各个 App 可以用自己的浏览器引擎. 有用 Android 的朋友可以帮忙测一下。

总结

  • 目前来看,直接在 eBay 商品里完全阻止深色模式的影响,或者完全自定义深色模式的样式,都很困难。
  • 比较可行的方式是,写 CSS 的时候就考虑深色模式下的显示效果,做好适配, 并且把重要的信息避免设置成过于简单直接的样式。 也许,联系eBay, 并获得一份关于 HTML 和 CSS 的明确使用规范文件才是解决之道.