H5 IOS兼容题目

Q1：设置配景色和边框不见效 — 非必然变乱

这个题目拿几部真机测试，发现是 IOS16+ 专有题目。且不是所有的H5页面都有题目。
缘故起因：元素设置了border-radius，配景和边框大概不展示。
A1：去掉border-radius。可以用图片代替（用图片代替，这个方案很呆）
A2：给当前元素添加两行样式

1. transform: matrix3d(0,0,0);
2. will-change: transform;

复制代码

A3：给父元素添加样式

1. -webkit-backface-visibility: hidden;
2. -webkit-transform: translate3d(0, 0, 0);

复制代码

 
Q2：<input> disabled时，整个文本框很含糊

缘故起因：ios默认了disabled属性时透明度为0.3
A1：disabled时，透明度设为1即可

1. input:disabled, textarea:diabled {
2.   opacity: 1;
3. }

复制代码

  增补说明：在reset input:disabled的地方，一样平常还有两行代码

1. input:disabled, textarea:diabled {
2.   color: #ccc;
3.   -webkit-text-fill-color: #ccc;
4. }

复制代码

 -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条【左边是上下箭头，右边是完成按钮】。如图：
  
  
  
  这时需要处理input，禁止光标进入（可使用下面代码）。
  1. input:read-only {
  2.     pointer-events: none;
  3. }

  复制代码
• :read-only选择器不只是选择具有 readonly 属性的<input> 元素，也会选择所有的不能被用户编辑的元素。input disabled时，:read-only选择器设置的样式同样见效。
  1. <!--html-->
  2. <input type="text" value="readonly" readonly><!--input1--><br>
  3. <input type="text" value="disabled" disabled><!--input2--><br>
  5. /*CSS*/
  6. input:disabled {/*样式1*/
  7.     color: red;
  8. }
  9. input:read-only {/*样式2*/
  10.     color: green;
  11. }
  13. <!--
  14.   结果：input1、input2的value值都是绿色
  15.   input1：匹配样式2
  16.   input2：匹配样式1和样式2。但样式2后设置，所以样式2生效
  17. -->

  复制代码

   
Q3：input/textarea 不能输入

缘故起因：CSS reset中代码，通配选择器 (*)的下面一行代码

1. * {
2.     -webkit-user-select:none;
3.     -moz-user-select:none;
4.     /*-khtml-user-select:none;*/
5.     -ms-user-select:none;
6.     user-select:none;
7. }

复制代码

• user-select：用于控制用户是否可以选择文本
  
• -khtml-前缀，是为了兼容早期Safari 欣赏器，可以追溯到Safari2。-webkit-前缀自 Safari 3 以来一直存在。险些不存在的东西，可以忽略。用-webkit-即可。
  

A：input / textarea 添加如下代码

1. input, textarea {
2.     -webkit-user-select:auto;
3. }

复制代码

 
Q4：链接或可点击元素，去掉被点击后，默认的灰色配景色

灰色配景结果如:
 

 A：

1. html {
2.     /*-webkit-tap-highlight-color 是个继承属性，所以放在html元素上设置*/
3.     -webkit-tap-highlight-color: transparent;
4. }

复制代码

 
Q5：去掉<button>默认样式？

1. button {
2.   -webkit-appearance: none;
3. }

复制代码

-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的字体看起来更细一些。

1. <p>Without font smoothing</p>
2. <p class="smoothed">With font smoothing</p>
4. .smoothed {
5.   -webkit-font-smoothing: antialiased;
6.   -moz-osx-font-smoothing: grayscale;
7. }

复制代码

欣赏器结果截图： 
 

The end.

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。