移动web在ios和android下点击元素出现阴影问题
2017-05-19 14:34
375 查看
移动web开发经验总结
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注:transparent的属性值在android下无效。
2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是因为这个。
4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。
5、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。
6、text-shadow多用这个属性,可以美化文字效果。
7、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。
8、android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具实现。
9、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
10、width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩 放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。
11、允许用户添加到主屏幕,并提供webapp的支持。
12、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。
13、使用media query适配不同屏幕。
14、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。
15、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。
16、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注:transparent的属性值在android下无效。
2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是因为这个。
4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。
5、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。
6、text-shadow多用这个属性,可以美化文字效果。
7、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。
8、android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具实现。
9、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
10、width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩 放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。
11、允许用户添加到主屏幕,并提供webapp的支持。
12、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。
13、使用media query适配不同屏幕。
14、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。
15、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。
16、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。
相关文章推荐
- 移动web在ios和android下点击元素出现阴影问题
- 移动web在ios和android下点击元素出现阴影问题
- 解决ios点击元素后出现阴影或闪烁的问题
- 同时屏蔽ios和android下点击元素时出现的阴影
- 时屏蔽ios和android下点击元素时出现的阴影
- [Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview点击穿透的缓解办法
- Android开发之如何在WebView中点击链接使用自身打开(解决出现的选择使用第三方应用的问题)
- android用webview加载H5页面出现点击事件失效的问题解决
- 移动开发不能不知道的事-关于点击元素时出现的阴影
- [Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview点击穿透的缓解办法
- Android中ScrollView+webView出现滑动异常问题
- webView.loadUrl("file:///android_asset/table3.html")出现中文乱码的问题
- JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案
- 使用OSS JavaScript的sdk进行web端直传,开发环境下测试没有问题,但部署到服务器上或者打包到IOS原生包中出现了问题。
- WebView加载详情页面时Android4.4.4系统手机下拉时文字出现半屏问题
- IOS和Android 语音转换时出现的问题
- 关于android的webview 使用的问题 JS无法正常使用 界面切换出现白屏
- 关于android 设置TextView可点击出现覆盖的问题
- Android自定义控件ImageView实现点击之后出现阴影效果
- 去掉 wap (android/ios)网页等点击后的阴影