移动端适配示例

/**
* 示例8: 移动端适配
* 功能：检测移动设备并优化表单布局和交互
*/
(function () {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
  try {
    // 移动设备检测
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );
    const isTablet = /iPad|Android.*(?!.*Mobile)/i.test(navigator.userAgent);
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

    // 获取设备信息
    const deviceInfo = {
      isMobile: isMobile,
      isTablet: isTablet,
      isTouchDevice: isTouchDevice,
      screenWidth: window.screen.width,
      screenHeight: window.screen.height,
      viewportWidth: window.innerWidth,
      viewportHeight: window.innerHeight,
      pixelRatio: window.devicePixelRatio || 1,
    };

    console.log('设备信息:', deviceInfo);

    // 如果是移动设备，应用移动端优化
    if (isMobile || isTablet || isTouchDevice) {
      applyMobileOptimizations(deviceInfo);
    }

    // 创建设备信息显示面板
    createDeviceInfoPanel(deviceInfo);

    // 监听屏幕方向变化
    window.addEventListener('orientationchange', () => {
      setTimeout(() => {
        handleOrientationChange();
      }, 100);
    });

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      handleWindowResize();
    });

  } catch (error) {
    console.error('移动端适配初始化失败:', error);
  }
});

// 应用移动端优化
function applyMobileOptimizations(deviceInfo) {
  const formElement = document.querySelector('.ant-form');
  if (!formElement) return;

  // 添加移动端样式类
  formElement.classList.add('mobile-optimized');

  // 创建移动端样式
  const mobileStyles = document.createElement('style');
  mobileStyles.textContent = `
    .mobile-optimized {
      font-size: 16px !important; /* 防止iOS缩放 */
    }
    
    .mobile-optimized .ant-form-item {
      margin-bottom: 20px !important; /* 增加间距 */
    }
    
    .mobile-optimized .ant-input,
    .mobile-optimized .ant-select-selector,
    .mobile-optimized .ant-picker {
      min-height: 44px !important; /* 触控友好的最小高度 */
      font-size: 16px !important;
      padding: 12px !important;
      border-radius: 8px !important;
    }
    
    .mobile-optimized .ant-btn {
      min-height: 44px !important;
      font-size: 16px !important;
      padding: 12px 20px !important;
      border-radius: 8px !important;
    }
    
    .mobile-optimized .ant-form-item-label {
      font-size: 16px !important;
      font-weight: 500 !important;
      margin-bottom: 8px !important;
    }
    
    /* 小屏幕适配 */
    @media (max-width: 768px) {
      .mobile-optimized {
        padding: 16px !important;
      }
      
      .mobile-optimized .ant-form-item {
        margin-bottom: 24px !important;
      }
      
      .mobile-optimized .ant-col {
        width: 100% !important;
        flex: none !important;
      }
    }
    
    /* 横屏适配 */
    @media (orientation: landscape) and (max-height: 600px) {
      .mobile-optimized .ant-form-item {
        margin-bottom: 16px !important;
      }
    }
  `;
  document.head.appendChild(mobileStyles);

  // 设置特定字段的移动端优化
  optimizeSpecificFields();

  // 优化数字输入
  optimizeNumericInputs();

  // 添加移动端特定功能
  addMobileSpecificFeatures();
}

// 优化特定字段
function optimizeSpecificFields() {
  // 邮箱字段设置为email类型
  const emailField = kinlink.formApi.getFieldElement('文字列__1行__3');
  if (emailField) {
    const emailInput = emailField.querySelector('input');
    if (emailInput) {
      emailInput.type = 'email';
      emailInput.autocomplete = 'email';
    }
  }

  // 电话字段设置为tel类型
  const phoneField = kinlink.formApi.getFieldElement('文字列__1行__2');
  if (phoneField) {
    const phoneInput = phoneField.querySelector('input');
    if (phoneInput) {
      phoneInput.type = 'tel';
      phoneInput.autocomplete = 'tel';
    }
  }

  // 日期字段优化
  ['日期_1', '日期_2'].forEach(fieldCode => {
    const dateField = kinlink.formApi.getFieldElement(fieldCode);
    if (dateField) {
      const dateInput = dateField.querySelector('input');
      if (dateInput) {
        dateInput.autocomplete = 'bday';
      }
    }
  });
}

// 优化数字输入
function optimizeNumericInputs() {
  const numericFields = document.querySelectorAll('input[type="number"]');
  numericFields.forEach(input => {
    input.inputMode = 'numeric';
    input.pattern = '[0-9]*';
  });
}

// 添加移动端特定功能
function addMobileSpecificFeatures() {
  // 防止双击缩放
  const viewport = document.querySelector('meta[name="viewport"]');
  if (viewport) {
    viewport.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no';
  }

  // 添加触摸反馈
  const touchElements = document.querySelectorAll('button, .ant-btn, .ant-input, .ant-select');
  touchElements.forEach(element => {
    element.addEventListener('touchstart', function() {
      this.style.opacity = '0.7';
    });
    
    element.addEventListener('touchend', function() {
      setTimeout(() => {
        this.style.opacity = '1';
      }, 150);
    });
  });
}

// 创建设备信息显示面板
function createDeviceInfoPanel(deviceInfo) {
  const infoPanel = document.createElement('div');
  infoPanel.style.cssText = `
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 1000;
    max-width: 200px;
  `;

  infoPanel.innerHTML = `
    <div><strong>设备信息</strong></div>
    <div>移动设备: ${deviceInfo.isMobile ? '是' : '否'}</div>
    <div>平板设备: ${deviceInfo.isTablet ? '是' : '否'}</div>
    <div>触控设备: ${deviceInfo.isTouchDevice ? '是' : '否'}</div>
    <div>屏幕: ${deviceInfo.screenWidth}×${deviceInfo.screenHeight}</div>
    <div>视口: ${deviceInfo.viewportWidth}×${deviceInfo.viewportHeight}</div>
    <div>像素比: ${deviceInfo.pixelRatio}</div>
  `;

  document.body.appendChild(infoPanel);

  // 5秒后自动隐藏
  setTimeout(() => {
    infoPanel.style.opacity = '0';
    infoPanel.style.transition = 'opacity 0.5s';
    setTimeout(() => {
      if (infoPanel.parentNode) {
        infoPanel.parentNode.removeChild(infoPanel);
      }
    }, 500);
  }, 5000);
}

// 处理屏幕方向变化
function handleOrientationChange() {
  console.log('屏幕方向已改变');
  kinlink.formApi.showMessage('info', '屏幕方向已改变，已自动调整布局', 2);
}

// 处理窗口大小变化
function handleWindowResize() {
  console.log('窗口大小已改变:', window.innerWidth + 'x' + window.innerHeight);
}
})();