iOS专属CSS开发疑问：为何使用-webkit-touch-callout:none？

1. 为什么用-webkit-touch-callout: none做特性检测？ #

你不用真的把它设为none，这里只是用这个私有属性来检测当前浏览器是否是iOS Safari（或基于WebKit的iOS浏览器）——因为这个属性是iOS WebKit独有的特性，其他系统浏览器不支持。

你用inherit也能生效，是因为只要浏览器识别这个属性，不管赋值是什么，@supports都会判定为支持，从而执行里面的样式。开发者习惯写none只是约定俗成，本质是利用这个属性的存在来做iOS环境判断，和最终是否修改长按菜单无关。

2. 不写@supports(-webkit-touch-callout:none)会有什么影响？ #

你的代码里用了-webkit-fill-available和stretch这两个属性：

• -webkit-fill-available是iOS WebKit的私有属性，用来替代100vh解决iOS状态栏/导航栏遮挡的问题；
• 如果不套@supports，非iOS浏览器会忽略这两个私有属性，继续用min-height:100vh，看起来好像没问题？但其实有些旧版安卓浏览器可能会识别stretch属性，导致布局异常；
• 更关键的是，@supports能确保只有真正支持iOS专属特性的浏览器才执行这段修正代码，避免给其他系统带来潜在的样式冲突。

你的代码逻辑说明 #

#main {
    min-height: 100vh;
}
/* iOS only */
@supports (-webkit-touch-callout: none) { 
    #main {
        min-height: -webkit-fill-available;
        min-height: stretch;
    }
}

这段代码的核心逻辑是：

• 先给所有浏览器设置基础的100vh高度；
• 用@supports检测iOS环境，给iOS设备替换成适配全屏的-webkit-fill-available（兼容旧版iOS）和标准属性stretch（适配新版iOS），解决100vh在iOS中被状态栏/底部导航栏挤占的问题。

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