1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。
备注:transparent的属性值在android下无效。

2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式,无需通过JS引擎,直接浏览器内核渲染),但是在android下不可乱用,很多见所未见的bug就是因为这个。

4、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上。

5、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

6、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。

7、//竖屏时使用的样式

@media all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
} 8、audio和video无法自动播放的问题,微信内置浏览器已解决此问题:
$('html').one('touchstart',function(){
    audio.play()
})//必须有交互动作才会触发

9、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。

 
10、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。
11、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。
12、视频全屏播放
//x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://">>

13、解决闪屏,-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;

14、触摸事件用touch系列,不要用click替代;
 
15、滚动条滚动时没有像ios原生那么顺滑流畅,没有回弹效果
{overflow:auto;-webkit-overflow-scrolling:touch;}
16、在处理IOS设备web页面的时候常常会遇到这样的问题,当我点击摸个元素时,点击区域会出现闪一下的情况。解决方法其实很简单,只需要给出现情况的元素加上下面的样式就能解决问题了。
      代码如下:-webkit-tap-highlight-color: rgba(0,0,0,0);这是ios设备特有的样式,原理是去掉ios背面的颜色。
 
17、改变input默认提示placeholder的样式:
::-webkit-input-placeholder{font-size: 0.24rem;color: #545454;line-h/ight: 0.4rem}
聚焦时不自动消失:
input:focus::-webkit-input-placeholder{
    opacity: 0;
}
 
18、移除 input type="number" 时浏览器自带的上下箭头:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
 
19、页面发短信 打电话 发邮件

Html 移动web开发细节处理的更多相关文章

  1. Web开发细节搜集

    App_Data 百度百科:  App_Data文件夹应该包含应用程序的本地数据存储.它通常以文件(诸如Microsoft Access或Microsoft SQL Server Express数据库 ...

  2. 简明易懂,将细节隐藏,面向新手树立web开发概念——学完Java基础语法,超快速上手springboot+mybatiJavaWeb开发

    简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...

  3. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  4. Web开发技术发展历史

    Web开发技术发展历史   来自:天码营 原文:http://www.tianmaying.com/tutorial/web-history Web的诞生 提到Web,不得不提一个词就是"互 ...

  5. 有助于提高你的 Web 开发技能的7个模式库

    正如语言风格指南一样,模式库有两个主要用途.首先,是它们提供了一组编码或设计标准,Web 开发团队可以在整个网站中应用,有助于保持一致的编码实践和外观:其次,对于要学习网页设计最佳实践来说是宝贵的财富 ...

  6. Web 开发常备工具

    工欲善其事,必先利其器.如今 Web 开发标准越来越高,Web 开发者也在不断寻找途径提升自己的技能.为使大家的开发工作更顺利进行,本文整理了 10+ 款比较优秀的 Web 开发工具,希望对你有帮助. ...

  7. 作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的

    前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programme ...

  8. Flask —— 使用Python和OpenShift进行即时Web开发

    最近Packtpub找到了我,让我给他们新出版的关于Flask的书写书评.Flask是一个很流行的Python框架.那本书是Ron DuPlain写的<Flask 即时Web开发>.我决定 ...

  9. web开发workflow

    web development是一个创建和实施一个新的互联网展示的过程,web网站可以是个非常成熟包罗万象的网站,也可以只是一个blog或者一两个页面.如果未做好充分的准备,web开发将是一个非常复杂 ...

随机推荐

  1. 【BZOJ-1123】BLO Tarjan 点双连通分量

    1123: [POI2008]BLO Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 970  Solved: 408[Submit][Status][ ...

  2. TypeScript Function(函数)

    在JavaScript中,函数是构成任何应用程序的基础块.通过函数,你得以实现建立抽象层.模仿类.信息隐藏和模块化.在TypeScript中,虽然已经存在类和模块化,但是函数依旧在如何去"处 ...

  3. 有米实习-用到的shell脚本和Python脚本记录

    Shell:LOG_DATE=`date -d "1 day ago" +%Y-%m-%d` #以指定格式设置一天前的年份月份日期 aws s3 ls $LAST5_BASE_PA ...

  4. elasticsearch agg

    OK curl -XGET http://21.3.5.121:9200/ipv4geo/service/_count -d '{"query":{"match" ...

  5. mysql 递归查询

    1.创建表: DROP TABLE IF EXISTS `t_areainfo`; CREATE TABLE `t_areainfo` ( `id` ) ' AUTO_INCREMENT, `) ', ...

  6. 安全测试及B/S C/S安全性比较

    一.用户认证安全的测试要考虑问题: 1.        明确区分系统中不同用户权限 2.        系统中会不会出现用户冲突 3.        系统会不会因用户的权限的改变造成混乱 4.     ...

  7. 2015.4.19 为什么footer下a的索引值那么大

    1.问题demo:为什么footer下a的索引值那么大,index不是查找兄弟级别的元素么?而且还限定了范围在footer下的a的情况下. 解决方法:alert( $("#footer a& ...

  8. Android高手速成--第二部分 工具库

    主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少Vie ...

  9. 【转】PHP curl CURLOPT_HTTPHEADER设置HOST

    为了安全,我们的web服务主机往往不能上网.维护的时候,也是通过跳板机,ssh登录后去操作. 有时候我们的程序需要访问外网.比如需要调用外网其他程序的某个接口.这下该怎么办呢? 我们可以通过PHP的C ...

  10. 编程之美读书笔记之 -寻找出现次数为1的ID的问题

    问题描述: 在一张表里面保存了N个ID,有N-1个ID是出现了两次的,只有一个ID只出现了一次,现在要你把这个ID找出来.如果是两个呢?   解法一: 我们先来解决一个的.假如ID的值的范围是1-k, ...