22
33### 伪类 : active 生效
44
5- 要CSS伪类: active 生效,只需要给document绑定 ` touchstart ` 或 ` touchend ` 事件
5+ 要CSS伪类 ` :active ` 生效,只需要给 document 绑定 ` touchstart ` 或 ` touchend ` 事件
66
77 <style>
88 a {
1717 document.addEventListener('touchstart',function(){},false);
1818 </script>
1919
20- ### 消除transition闪屏
20+ ### 消除 transition 闪屏
2121
2222两个方法
2323
2424 -webkit-transform-style: preserve-3d;
2525 /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
26- -webkit-backface-visibility:? hidden;
26+ -webkit-backface-visibility: hidden;
2727 /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
2828
29- ### 消除ie10里面的那个叉号
30- [ http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx ] ( http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx " article4 ")
29+ ### 消除 IE10 里面的那个叉号
3130
32- input:-ms-clear{display:none;}
31+ input:-ms-clear{display:none;}
32+
33+ 来源出处:[ http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx ] ( http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx " article4 ")
3334
34- ###关于ios与os端字体的优化 (横竖屏会出现字体加粗不一致等)
35- ios浏览器横屏时会重置字体大小 ,设置 ` text-size-adjust ` 为 ` none ` 可以解决ios上的问题,但桌面版safari的字体缩放功能会失效 ,因此最佳方案是将 ` text-size-adjust ` 为 ` 100% ` 。
35+ ###关于 iOS 与 OS X 端字体的优化 (横竖屏会出现字体加粗不一致等)
36+ iOS 浏览器横屏时会重置字体大小 ,设置 ` text-size-adjust ` 为 ` none ` 可以解决 iOS 上的问题,但桌面版 Safari 的字体缩放功能会失效 ,因此最佳方案是将 ` text-size-adjust ` 为 ` 100% ` 。
3637
3738 -webkit-text-size-adjust: 100%;
3839 -ms-text-size-adjust: 100%;
3940 text-size-adjust: 100%;
4041
41- ### js事件
42+ ### JS 事件相关
4243click 事件普遍 300ms 的延迟
43- 在手机上绑定click 事件,会使得操作有300ms 的延迟,体验并不是很好。
44- 开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成
44+ 在手机上绑定 click 事件,会使得操作有 300ms 的延迟,体验并不是很好。
45+ 开发者大多数会使用封装的 tap 事件来代替 click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成
4546
46- ### ios点击会慢300ms
47+ ### iOS 点击会慢 300ms 问题
4748
4849 [ https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE ] ( https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE " article5 ")
4950 [ http://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari ] ( http://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari " article5 ")
5051
51- 使用css3动画的时尽量利用3D加速 ,从而使得动画变得流畅。动画过程中的动画闪白可以通过backface -visibility 隐藏。
52+ 使用 CSS3 动画的时尽量利用3D加速 ,从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface -visibility 隐藏。
5253
5354 -webkit-transform-style: preserve-3d;
5455 -webkit-backface-visibility: hidden;
5556
5657
57- ### ie10的特殊鼠标事件
58+ ### IE10 的特殊鼠标事件
5859
5960[ http://www.mansonchor.com/blog/blog_detail_73.html ] ( http://www.mansonchor.com/blog/blog_detail_73.html " article5 ")
6061
61- ### 不让android识别邮箱
62+ ### 不让 Android 手机识别邮箱
6263
6364 <meta content="email=no" name="format-detection" />
6465
65- ### 禁止ios弹出各种操作窗口
66+ ### 禁止 iOS 弹出各种操作窗口
6667
6768 -webkit-touch-callout:none
6869
6970### 禁止用户选中文字
7071
7172 -webkit-user-select:none
7273
73- ### 动画效果中,使用translate比使用定位性能高
74+ ### 动画效果中,使用 translate 比使用定位性能高
7475
7576< http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ >
7677
77- ### 拿到滚动条
78+ ### 获取滚动条
7879
7980 window.scrollY
8081 window.scrollX
8182
82- 比如要绑定一个touchmove的事件 ,正常的情况下类似这样(来自呼吸二氧化碳)
83+ 比如要绑定一个 touchmove 的事件 ,正常的情况下类似这样(来自呼吸二氧化碳)
8384
8485 $('div').on('touchmove', function(){
8586 //.….code
8687 });
8788
88- 而如果中间的code需要处理的东西多的话,fps就会下降影响程序顺滑度 ,而如果改成这样
89+ 而如果中间的 code 需要处理的东西多的话,FPS 就会下降影响程序顺滑度 ,而如果改成这样
8990
9091 $('div').on('touchmove', function(){
9192 setTimeout(function(){
9293 //.….code
9394 },0);
9495 });
9596
96- 把代码放在setTimeout中 ,会发现程序变快.
97+ 把代码放在 setTimeout 中 ,会发现程序变快.
9798
98- ### 关于ios系统中,webapp启动图片在不同设备上的适应性设置
99+ ### 关于 iOS 系统中,WebAPP 启动图片在不同设备上的适应性设置
99100
100- http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893
101+ < http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893 >
101102
102- ### 关于ios系统中 ,中文输入法输入英文时,字母之间可能会出现一个六分之一空格(焦点科技葛亮)
103+ ### 关于 iOS 系统中 ,中文输入法输入英文时,字母之间可能会出现一个六分之一空格(焦点科技葛亮)
103104可以通过正则去掉
104105
105106 this.value = this.value.replace(/\u2006/g, '');
106107
107- ### 关于android webview中,input元素输入时出现的怪异情况
108+ ### 关于 Android WebView中,input 元素输入时出现的怪异情况
108109见图
109110![ 怪异图] ( http://cdn.bielousov.com/wp-content/uploads/2012/08/android-input-label-text-issue.png )
110111
111- Android web视图,至少在HTC EVO和三星的Galaxy Nexus中,文本输入框在输入时表现的就像占位符。情况为一个类似水印的东西在用户输入区域,一旦用户开始输入便会消失(见图片)。
112- 在android的默认样式下当输入框获得焦点后,若存在一个绝对定位或者fixed的元素,布局会被破坏,其他元素与系统输入字段会发生重叠(如搜索图标将消失为搜索字段),可以观察到布局与原始输入字段有偏差(见截图)。
112+ Android web视图,例如在 HTC EVO 和三星的 Galaxy Nexus 中,文本输入框在输入时表现的就像占位符。情况为一个类似水印的东西在用户输入区域,一旦用户开始输入便会消失(见图片)。
113+
114+ 在 Android 的默认样式下当输入框获得焦点后,若存在一个绝对定位或者fixed的元素,布局会被破坏,其他元素与系统输入字段会发生重叠(如搜索图标将消失为搜索字段),可以观察到布局与原始输入字段有偏差(见截图)。
113115这是一个相当复杂的问题,以下简单布局可以重现这个问题:
114116
115117 <label for="phone">Phone: *</label>
@@ -119,12 +121,12 @@ Android web视图,至少在HTC EVO和三星的Galaxy Nexus中,文本输入框
119121
120122 -webkit-user-modify: read-write-plaintext-only
121123
122- 详细参考< http://www.bielousov.com/2012/android-label-text-appears-in-input-field-as-a-placeholder/ >
124+ 详细参考: < http://www.bielousov.com/2012/android-label-text-appears-in-input-field-as-a-placeholder/ >
123125注意,该属性会导致中文不能输入词组,只能单个字。感谢鬼哥与飞(游勇飞)贡献此问题与解决方案
124126
125127
126- ### JS动态生成的select下拉菜单在Android2.x版本的默认浏览器里不起作用
128+ ### JS 动态生成的 select 下拉菜单在 Android2.x 版本的默认浏览器里不起作用
127129
128- 解决方法删除了overflow -x: hidden ; 然后在JS生成下来菜单之后focus聚焦 ,这两步操作之后解决了问题。(来自岛都-小Qi)
130+ 解决方法删除了 ` overflow -x:hidden;` 然后在JS生成下来菜单之后 focus 聚焦 ,这两步操作之后解决了问题。(来自岛都-小Qi)
129131
130- 参考< http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator >
132+ 参考: < http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator >
0 commit comments