为何iPhone不遵循max-width:100%规则？移动端适配及CKEditor5问题

一、iPhone端图片max-width失效的修复方案 #

你遇到的问题本质是Safari（iPhone默认浏览器）对width与max-width的优先级处理和其他浏览器存在差异，同时设置固定宽度和响应式限制时，固定宽度会优先锁定元素尺寸。可以通过以下两种方式修复：

1. 调整CSS属性逻辑
   将固定宽度仅应用于大屏场景，小屏自动继承max-width的限制，避免固定值覆盖响应式规则：

.section20 .image {
  width: 600px;
  max-width: 100%;
}
.section20 img {
  width: 100%;
  max-width: 100%;
  height: auto; /* 强制保留图片比例，防止拉伸变形 */
}

• 父容器figure设置固定宽度+max-width，确保大屏显示600px，小屏自动收缩
• 子元素img设置width:100%填满父容器，height:auto保证比例，在iPhone上会跟随父容器的响应式限制

2. 强制修改元素渲染模式
   Safari对行内元素的max-width处理存在特殊逻辑，给图片添加display:block可解决：

.section20 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

二、CKEditor5自定义类名被移除的解决办法 #

CKEditor5默认会过滤非白名单内的类名，要保留自定义类，需修改编辑器配置：

1. 快速放开内容限制
   初始化编辑器时开启allowedContent，允许所有类名和内容：

ClassicEditor
  .create(document.querySelector('#editor'), {
    allowedContent: true
  })
  .catch(error => {
    console.error(error);
  });

如果需要精细控制，可指定允许的标签和类：

allowedContent: 'figure(image,my-custom-class); img[src,alt]'

2. 自定义样式白名单
   通过stylesSet添加可选择的自定义样式，既能在可视化编辑器里直接应用，又不会被过滤：

ClassicEditor
  .create(document.querySelector('#editor'), {
    stylesSet: [
      { name: '自定义图片容器', element: 'figure', attributes: { class: 'my-custom-class' } }
    ]
  })

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