如何使Safari中的date-time-edit随页面缩放同步调整？

问题原因 #

Safari 的原生 <input type="date"> 属于系统级渲染组件，其缩放逻辑独立于页面的 CSS 缩放机制，因此页面放大时不会同步适配；而 Chrome 等浏览器会将原生控件纳入页面整体缩放体系，所以表现正常。

解决方案 #

方案一：通过 CSS + JS 动态适配缩放比例

针对 Safari 浏览器，利用 CSS 变量结合 JavaScript 获取页面缩放比例，强制同步日期选择器的缩放：

1. 添加 CSS 规则：

/* 仅针对 Safari 生效的样式 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    input[type="date"] {
      zoom: calc(100% * var(--page-zoom, 1));
    }
  }
}

2. 添加 JavaScript 监听页面缩放：

// 计算并设置页面缩放比例的 CSS 变量
function setPageZoomVariable() {
  const zoomLevel = window.devicePixelRatio / (window.screen.deviceXDPI / window.screen.logicalXDPI);
  document.documentElement.style.setProperty('--page-zoom', zoomLevel);
}

// 初始化及监听窗口缩放事件
setPageZoomVariable();
window.addEventListener('resize', setPageZoomVariable);

方案二：替换为自定义日期选择器

如果原生控件的兼容问题无法通过上述方法彻底解决，建议使用自定义日期选择器组件（如 Flatpickr、Vanilla Datepicker 等），这类组件完全由页面 CSS 控制，可完美适配页面缩放，同时还能统一各浏览器的视觉表现。

内容的提问来源于stack exchange，提问作者ralphjsmit