iOS端Web开发的一些经验

## 屏幕点击

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()的日期字符串参数要满足RFC2822ISO 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里其他字符还包含了单引号(不管是几个单引号),按上面这样直接操作,就要导致出错,无法解析。