From 9996ebf00e8c905853531977a1ee03117e8b50c0 Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Thu, 15 Jan 2026 17:11:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=92=8C=E6=AF=9B?=
 =?UTF-8?q?=E7=8E=BB=E7=92=83=E6=95=88=E6=9E=9C=E5=85=BC=E5=AE=B9=E6=80=A7?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 backdrop-filter 支持检测，不支持时使用降级方案
- 添加移动端设备检测类 is-mobile-device
- 监听深色模式切换，强制刷新样式解决颜色不更新问题
- 为移动端添加强制文字颜色修复
- 简化代码结构，移除冗余检测逻辑
---
 header.php   | 89 ++++++++++++++++++++++++++++++++++++++--------------
 version.json |  2 +-
 2 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/header.php b/header.php
index 597ec3a..af0df21 100644
--- a/header.php
+++ b/header.php
@@ -289,40 +289,81 @@
 	
 	<?php wp_head(); ?>
 	
-	<!-- 移动端资源加载修复 - 确保 CSS 完全应用 -->
+	<!-- 移动端兼容性修复 -->
 	<script>
 		(function() {
-			// 检测移动端并强制重新计算样式
-			if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-				// 确保 CSS 已加载
-				var checkCSS = function() {
-					var testEl = document.createElement('div');
-					testEl.className = 'container';
-					testEl.style.cssText = 'position:absolute;visibility:hidden;';
-					document.body.appendChild(testEl);
-					var computed = window.getComputedStyle(testEl);
-					var isLoaded = computed.width !== 'auto' && computed.width !== '';
-					document.body.removeChild(testEl);
-					return isLoaded;
-				};
+			var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+			var html = document.documentElement;
+			
+			// 检测 backdrop-filter 支持
+			var supportsBackdrop = CSS.supports && (
+				CSS.supports('backdrop-filter', 'blur(1px)') || 
+				CSS.supports('-webkit-backdrop-filter', 'blur(1px)')
+			);
+			
+			if (!supportsBackdrop) {
+				html.classList.add('no-backdrop-filter');
+			}
+			
+			if (isMobile) {
+				html.classList.add('is-mobile-device');
 				
-				// 如果 CSS 未完全加载，强制重新加载
-				document.addEventListener('DOMContentLoaded', function() {
-					if (!checkCSS()) {
-						// 触发重排以应用样式
-						document.body.style.display = 'none';
-						document.body.offsetHeight; // 强制重排
-						document.body.style.display = '';
-					}
+				// 监听深色模式切换，强制刷新样式
+				var observer = new MutationObserver(function(mutations) {
+					mutations.forEach(function(mutation) {
+						if (mutation.attributeName === 'class') {
+							// 强制重新计算所有样式
+							document.body.style.display = 'none';
+							void document.body.offsetHeight;
+							document.body.style.display = '';
+						}
+					});
 				});
+				
+				observer.observe(html, { attributes: true, attributeFilter: ['class'] });
 			}
 		})();
 		
-		// 用户角色检测 - 传递给前端JavaScript
+		// 用户角色检测
 		window.argonUserRole = '<?php echo current_user_can('administrator') ? 'administrator' : (is_user_logged_in() ? 'user' : 'guest'); ?>';
 	</script>
 	
-	<!-- Argon 修复补丁 - 必须在 wp_head() 之后立即执行 -->
+	<!-- 移动端降级样式 -->
+	<style>
+		/* 不支持 backdrop-filter 时的降级方案 */
+		html.no-backdrop-filter .card.bg-white,
+		html.no-backdrop-filter article.post.card,
+		html.no-backdrop-filter #comments.card,
+		html.no-backdrop-filter #post_comment.card {
+			background-color: rgba(255, 255, 255, 0.95) !important;
+		}
+		html.no-backdrop-filter.darkmode .card.bg-white,
+		html.no-backdrop-filter.darkmode article.post.card,
+		html.no-backdrop-filter.darkmode #comments.card,
+		html.no-backdrop-filter.darkmode #post_comment.card {
+			background-color: rgba(50, 50, 50, 0.95) !important;
+		}
+		
+		/* 移动端深色模式文字颜色强制修复 */
+		html.is-mobile-device.darkmode body,
+		html.is-mobile-device.darkmode .post-content,
+		html.is-mobile-device.darkmode .card-body,
+		html.is-mobile-device.darkmode p,
+		html.is-mobile-device.darkmode span,
+		html.is-mobile-device.darkmode li {
+			color: #eee !important;
+		}
+		html.is-mobile-device:not(.darkmode) body,
+		html.is-mobile-device:not(.darkmode) .post-content,
+		html.is-mobile-device:not(.darkmode) .card-body,
+		html.is-mobile-device:not(.darkmode) p,
+		html.is-mobile-device:not(.darkmode) span:not(.badge),
+		html.is-mobile-device:not(.darkmode) li {
+			color: #525f7f !important;
+		}
+	</style>
+	
+	<!-- Argon 修复补丁 -->
 	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/argon.min.js?ver=<?php echo $GLOBALS['theme_version']; ?>"></script>
 
 	<?php $GLOBALS['wp_path'] = get_option('argon_wp_path') == '' ? '/' : get_option('argon_wp_path'); ?>
diff --git a/version.json b/version.json
index 0e64f13..bc18591 100644
--- a/version.json
+++ b/version.json
@@ -1,4 +1,4 @@
 {
   "branch": "master",
-  "commit": "5ecbacb"
+  "commit": "14edc70"
 }