H5 IOS兼容题目
Q1：设置配景色和边框不见效 — 非必然变乱这个题目拿几部真机测试，发现是 IOS16+ 专有题目。且不是所有的H5页面都有题目。
缘故起因：元素设置了border-radius，配景和边框大概不展示。
A1：去掉border-radius。可以用图片代替（用图片代替，这个方案很呆）
A2：给当前元素添加两行样式
transform: matrix3d(0,0,0);
will-change: transform; A3：给父元素添加样式
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
Q2：<input> disabled时，整个文本框很含糊
缘故起因：ios默认了disabled属性时透明度为0.3
A1：disabled时，透明度设为1即可
input:disabled, textarea:diabled {
opacity: 1;
} 增补说明：在reset input:disabled的地方，一样平常还有两行代码
input:disabled, textarea:diabled {
color: #ccc;
-webkit-text-fill-color: #ccc;
} -webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性，则使用 color 属性的值。
[*]同时设置了-webkit-text-fill-color和color，color失效。
[*]设置了-webkit-text-fill-color，input的value和placeholder颜色都是该值。
[*]color只是value的颜色值，并不适用placeholder。
A2：用readonly属性替换disabled
我自己很少用readonly，也不推荐使用。重要是因为如下副作用：
[*]readonly可以获取焦点，虽然没有弹起键盘，但是底部出现一个键盘的bar条【左边是上下箭头，右边是完成按钮】。如图：
https://i-blog.csdnimg.cn/blog_migrate/652bd78d25d1334d954794cccfb9b70e.png
这时需要处理input，禁止光标进入（可使用下面代码）。 input:read-only {
pointer-events: none;
}
[*]:read-only选择器不只是选择具有 readonly 属性的<input> 元素，也会选择所有的不能被用户编辑的元素。input disabled时，:read-only选择器设置的样式同样见效。 <!--html-->
<input type="text" value="readonly" readonly><!--input1--><br>
<input type="text" value="disabled" disabled><!--input2--><br>
/*CSS*/
input:disabled {/*样式1*/
color: red;
}
input:read-only {/*样式2*/
color: green;
}
<!--
结果：input1、input2的value值都是绿色
input1：匹配样式2
input2：匹配样式1和样式2。但样式2后设置，所以样式2生效
-->
Q3：input/textarea 不能输入
缘故起因：CSS reset中代码，通配选择器 (*)的下面一行代码
* {
-webkit-user-select:none;
-moz-user-select:none;
/*-khtml-user-select:none;*/
-ms-user-select:none;
user-select:none;
}
[*]user-select：用于控制用户是否可以选择文本
[*]-khtml-前缀，是为了兼容早期Safari 欣赏器，可以追溯到Safari2。-webkit-前缀自 Safari 3 以来一直存在。险些不存在的东西，可以忽略。用-webkit-即可。
A：input / textarea 添加如下代码
input, textarea {
-webkit-user-select:auto;
}
Q4：链接或可点击元素，去掉被点击后，默认的灰色配景色
灰色配景结果如:
https://i-blog.csdnimg.cn/blog_migrate/acbb6efc3a4618795ebd85789735463f.png
A：
html {
/*-webkit-tap-highlight-color 是个继承属性，所以放在html元素上设置*/
-webkit-tap-highlight-color: transparent;
}
Q5：去掉<button>默认样式？
button {
-webkit-appearance: none;
} -webkit-appearance 属性设置为 none ，来禁用 iPhone 中<button>元素的内置样式。
Q6：-webkit-font-smoothing: antialiased;？
font-smooth CSS 属性控制字体渲染时应用的抗锯齿结果。Webkit 实现了名为 -webkit-font-smoothing 的相似属性。该属性仅适用于 macOS。
[*]auto——由欣赏器决定（假如可用，则使用亚像素抗锯齿；这是默认值）。
[*]none——关闭字体平滑；表现带有锯齿边缘的文本。
[*]antialiased——在像素（而不是亚像素）级别平滑字体。对于深色配景上的淡色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
[*]subpixel-antialiased——在大多数非视网膜表现器上，这将会提供最清晰的文本。
font-smooth具有继续性，可以放在body元素上设置。
antialiased比auto的字体看起来更细一些。
<p>Without font smoothing</p>
<p class="smoothed">With font smoothing</p>
.smoothed {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} 欣赏器结果截图：
https://i-blog.csdnimg.cn/blog_migrate/bb52c145894d060f4a390429240374ed.png
The end.
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]