解决横竖屏切换时srcset图片无法自动切换的问题

Hey there, let's tackle this issue you're facing with your iPhone 6 not switching the fullscreen images when rotating the screen. I've dealt with this exact problem before, so here are a couple of solid solutions that should get things working as expected:

方案1：用<picture>标签+媒体查询（无JS，推荐） #

This is the cleanest approach since it leverages native browser behavior—no JavaScript required. The <picture> element lets you define different image sources based on media conditions, and browsers will automatically re-evaluate these conditions when the screen orientation changes.

Here's how to implement it:

<picture>
  <!-- 竖屏适配：宽高比小于等于1（手机竖放状态） -->
  <source media="(max-aspect-ratio: 1/1)" srcset="your-portrait-image.jpg">
  <!-- 横屏适配：宽高比大于1（手机横放状态） -->
  <source media="(min-aspect-ratio: 1.01/1)" srcset="your-landscape-image.jpg">
  <!-- 降级方案：针对不支持picture标签的老旧浏览器 -->
  <img src="your-fallback-image.jpg" alt="Fullscreen hero image" class="fullscreen-img">
</picture>

Why this works for iPhone 6: #

Safari on iOS (including iPhone 6) fully supports the <picture> element and will re-check the media queries whenever the screen orientation or viewport size changes. No extra code needed—just let the browser handle the heavy lifting.

方案2：JavaScript监听屏幕变化（适合复杂逻辑） #

If you need more control over the image switching (like adding loading animations or dynamic image paths), using JavaScript to listen for orientation changes is the way to go. Note that on iPhone 6, the orientationchange event can sometimes have a slight delay, so pairing it with the resize event ensures we catch all viewport changes.

Here's a robust implementation:

// 获取全屏图片元素
const heroImg = document.querySelector('.fullscreen-img');

// 定义不同方向对应的图片路径
const imageSources = {
  portrait: 'portrait-version.jpg',
  landscape: 'landscape-version.jpg'
};

// 根据当前屏幕方向更新图片的函数
function updateHeroImage() {
  // 用视口宽高判断横竖屏比直接用orientation属性更可靠
  const isPortrait = window.innerHeight > window.innerWidth;
  const targetSrc = isPortrait ? imageSources.portrait : imageSources.landscape;

  // 仅当目标路径与当前路径不同时更新，避免不必要的重复加载
  if (heroImg.src !== targetSrc) {
    heroImg.src = targetSrc;
  }
}

// 页面加载时先执行一次，设置初始正确的图片
updateHeroImage();

// 监听屏幕方向变化和窗口尺寸变化事件
window.addEventListener('orientationchange', updateHeroImage);
window.addEventListener('resize', updateHeroImage);

针对iPhone 6的额外优化建议 #

• 预加载图片：为了避免切换方向时出现空白，提前缓存两张图片：

  // 预加载图片到浏览器缓存
  Object.values(imageSources).forEach(src => {
    const img = new Image();
    img.src = src;
  });
  

• 正确设置视口标签：确保viewport元标签配置正确，保证设备能准确报告视口尺寸：

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

• 避免缓存问题：如果需要频繁更新图片，可以在路径后添加版本号（如?v=1），强制浏览器获取最新资源。

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