iPhone 13 mini横屏时CSS媒体查询无法调整div/textarea尺寸求助

• 先排查媒体查询匹配问题：iPhone 13 mini横屏的逻辑分辨率为812×375，你之前用的@media screen and (max-width: 650px) and (orientation:landscape)根本不会触发，因为横屏时视口宽度远大于650px。建议替换为更精准的查询：

  /* 匹配iPhone13 mini横屏 */
  @media screen and (min-width: 800px) and (max-width: 820px) and (orientation: landscape) {
    /* 你的样式调整 */
  }
  /* 或者通用横屏小高度设备（适配多数小屏手机横屏） */
  @media screen and (orientation: landscape) and (max-height: 400px) {
    /* 你的样式调整 */
  }
  

• 调整form容器与textarea样式：

  • 给form容器移除固定宽度，设置width: 100%或max-width: 100vw，同时添加overflow: hidden避免内容溢出
  • textarea强制适配容器：

    textarea {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box; /* 确保内边距和边框不会撑大元素 */
    }
    

• 检查viewport设置：确保页面头部添加了正确的viewport meta标签，这是移动适配的基础：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 排查样式优先级：如果媒体查询里的样式没生效，检查是否有更高优先级的CSS规则（比如行内样式、ID选择器）覆盖了它，可通过浏览器开发者工具查看元素样式面板确认。

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