iOS端Web开发的一些经验

发表于 更新于
本文字数： 1.9k 阅读时长 ≈ 3 分钟

##　屏幕点击

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
selector {
  /*
   * 1. 这个属性只用于iOS (iPhone和iPad)。
   * 2. 当用户轻按一个链接或者通过JavaScript定义的可点击元素时，iOS会给元素覆盖一个半透明的高亮色，默认灰。
   * 3. 想要透明效果，就设置为`transparent`。
   * 4. 想要禁用视觉效果，设置一个rgba的颜色，并把alpha值设为0。
   */
  -webkit-tap-highlight-color: transparent;

  /*
   * 1. 触摸并按住触摸目标时候，如何显示系统默认菜单。
   * 2. 默认值：default，可选值： none，initial， inherit，unset。
   * 3. 一般会在链接/图片上设置为none，禁止弹出菜单。
   */
  -webkit-touch-callout: none;

  /*
   * 1. 控制文本是否选中。
   * 2. 默认值：text（可选择文本），可选值：none（文本不能被选择），all（所有），element（可以选择文本,但选择范围受元素边界的约束。）
   * 3. 较多的时候会设置成none
   * 4. 可以直接在`body`下写，但是不可以在`body * {}`这样写，当然更不可以在`*`选择器下写，否则在部分机型下会导致页面获取不到光标和无法输入（比如iPhone X）
   *
   */
  -webkit-user-select: none;
  user-select:none;
}

<input />在iPhone里的键盘弹出问题

  1. 场景：有些时候需要对输入框做禁止输入的操作。通常，我们会直接想到传入属性readonly="readonly"
  2. 但这对<input />是不足够的，在iPhone（Android是不会有这样的问题的）里，底部还是弹出了系统键盘的“上下箭头”和“确定”按钮，然后会把Web页面给顶起来，让页面出现了不正确的布局表现——需要按住这个弹出的键盘往下拉，才能让页面变得正常。
  3. 奇怪的箭头是iPhone为了方便用户在不同的可输入单元之间切换而增加的机制
  4. 通过设置unselectable="on" tabindex="-1"，甚至是onfocus="this.blur()"都没有效果。
  5. 如果用JavaScript写了自动失去焦点的逻辑，在Xcode的模拟器上会成功的，但实际在7p、8p的测试机里还是会有弹出的效果，虽然没有上下箭头和确定按钮了，但页面还是受到了影响。
  6. 所以如果有需要禁止输入的业务场景被包含，尽量不要使用<input />标签

Date.parse()

  1. Date.parse(datestring)方法可解析一个日期时间字符串，并返回该日期时间距离 1970/1/1 午夜毫秒数。
  2. 但是形如Date.parse("2018-01-11 20:00:00")在Safari下，是会产生问题的。
  3. 因为Safari要求Date.parse()或Date()的日期字符串参数要满足RFC2822或ISO 8601定义的格式。如果格式不符合，就返回NaN
  4. 举个例子：ISO 8601要求在日期和时间之间需要使用字符“T”隔开，就好像Date.parse("2018-01-11T20:00:00")，如果要表示时区，还要在末尾增加标记。

一次因为iPhone手机名字和系统语言产生的Bug

  1. 业务场景是Hybird App，原生iOS框架给Web页面注入Cookie，其中需要把用户的手机名收集进去，但是出现了部分机型不能正确实现并且报错（js的错误）的Bug。
  2. 如果手机系统的语言是中文，你的手机名就是“某某某”的 什么型号手机
  3. 如果手机系统的语言是英文，手机名则是ABC's phone
  4. 微妙的坑出现在英文系统里——这个手机名里的单引号，如果直接把手机名引入某个字符串，就可能造成代码里的单引号不成对，引发报错。
  5. 上面的业务场景里，iOS用OC开发，字符串是@"string"这样的写法，也就是外面有一个双引号，如果把它放进同样是字符串的Cookie里，为了避免引号问题，可能会选用一对单引号包裹Cookie。但如果Cookie里其他字符还包含了单引号（不管是几个单引号），按上面这样直接操作，就要导致出错，无法解析。