移动开发不能不知道的事-关于点击元素时出现的阴影

移动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、<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">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}伪类,否则滑动会卡。

时间: 2024-10-06 00:22:40

移动开发不能不知道的事-关于点击元素时出现的阴影的相关文章

移动开发不能不知道的事-meta

webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capa

移动开发不能不知道的事- css3复选框样式自定义

样式化复选框(Styling Checkbox) 复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态  未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图: blue.png 在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能

Android生命周期里你或许不知道的事

Android生命周期估计连初学者都再熟悉不过的东西了,但这里我抛出几个问题,或许大家以前没有想过或者可能认识的有些错误. 一.当A启动B时,A和B生命周期方法执行的先后顺序是怎样的?当按返回键返回时,又是怎样的?(读者可以先想想,可能会跟你的答案不一致) A--->B时,打印结果如下: 按返回键B--->A,打印结果如下: 结论:先执行当前显示Activity的onPause方法,接着执行完将要显示Activity的生命周期方法,最后再执行当前显示Activity的其它生命周期方法 二.生命

网站细节优化,你不得不知道的事

你怎么做优化的?这句话问到许多人的时分他们都是一个回答."文章,外链",其实,搜索引擎优化真的并不是如此.下面天津搜索引擎优化小编举个简略的比方,就好比咱们买了个新房子,文章即是你房子中的家私,外链即是你需求来观赏的兄弟.你的家私多,而且异乎寻常,也即是说你的文章多,自创,当然可以很招引你需求到来的兄弟们的眼球.可是,如果你的房子地没扫,各种规划不合理,很有可能会给别人形成肮脏的印象.所以,做搜索引擎优化并不是只要文章还有外链,还需要你进行仔细的润饰,也即是咱们做的网站细节优化.下面我

ES6 你可能不知道的事 – 基础篇

ES6 你可能不知道的事 – 基础篇 转载 作者:淘宝前端团队(FED)- 化辰 链接:taobaofed.org/blog/2016/07/22/es6-basics/ 序 ES6,或许应该叫 ES2015(2015 年 6 月正式发布),对于大多数前端同学都不陌生. 首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性 你可能不知道的事,希望能为各位同学 正确使用 ES6,提供一些指导. 对于 ES6,有些同学已经在项目中有过深入使用了,有些则刚刚开始认识他,但不论你是属于哪一类

overflow:hidden 你所不知道的事

overflow:hidden 你所不知道的事 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的.但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下. <div id="wai"> <div id="nei">

关于微服务架构,你不得不知道的事

现如今随着新一代IT技术的发展,业务需求变的日益复杂,企业对于IT的敏捷性有了更高的要求,需要快速部署.开发.上线.迭代.传统的IT架构面临巨大挑战,往往系统还未搭建好需求就已改变.所以,以云计算.大数据.移动互联网和物联网等新一代IT技术作为技术支撑,微服务架构模式应运而出,为敏捷部署以及复杂企业应用实施提供巨大的帮助. 微服务架构不是凭空而来,互联网的连接正在变革一个个的应用场景,(2C端)比如说拼车.滴滴打车,出门前就可以把车叫好,在北京还有回家吃饭的app,在周边的人做了饭就给你送过来,

关于Git我们不得不知道的事

一.什么是Git? Git是目前世界上最先进的分布式版本控制系统(没有之一). Git可以协助我们很方便的管理我们的项目,我们随时可以找回(或者回到)我们之前任何一个时刻的项目:还可以让同事或者开发小组成员一同开发:是不是很方便! 二.Git的使用方法 安装Git(这些在官网教程写的很清楚就不啰嗦再写一遍了) 获取Git仓库 有两种取得 Git 项目仓库的方法. 第一种是在现有项目或目录下导入所有文件到 Git 中: 第二种是从一个服务器克隆一个现有的 Git 仓库. 1,进入想管理的项目目录,

Spring中你可能不知道的事(二)

在上一节中,我介绍了Spring中极为重要的BeanPostProcessor BeanFactoryPostProcessor Import ImportSelector,还介绍了一些其他的零碎知识点,正如我上一节所说的,Spring实在是太庞大了,是众多Java开发大神的结晶,很多功能,很多细节,可能一辈子都不会用到,不会发现,作为普通开发的我们,只能尽力去学习,去挖掘,也许哪天可以用到呢. 让我们进入正题吧. Full Lite 在上一节中的第一块内容,我们知道了Spring中除了可以注册