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. vs创建项目模板和项模板

    原文地址:https://msdn.microsoft.com/zhcn/library/xkh1wxd8(v=vs.140).aspx 如何:创建项目模板 Visual Studio 2015   ...

  2. RAM、DRAM、SD卡

    catalogue . ROM.RAM.DRAM.SRAM和FLASH的区别 . 内存工作原理 . DRAM基本结构与原理 . SD卡基本结构与原理 1. ROM.RAM.DRAM.SRAM和FLAS ...

  3. 对于angularJS的一点思考

    已经找好工作近两周了,入职基本上还算顺利,自己两年来的挑灯夜战也算是有了收获,于是这两周基本上是按部就班的工作,没有学习什么新技术.在上个公司的时候,同事在项目中使用angularJs,之前他也没有接 ...

  4. ngBind ngBindTemplate ngBindHtml

    ng-bind: 只能绑定一个变量 在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{titleStr}}</p> 另一种是使用基于属 ...

  5. Python脚本报错AttributeError: ‘module’ object has no attribute’xxx’解决方法

    最近在编写Python脚本过程中遇到一个问题比较奇怪:Python脚本完全正常没问题,但执行总报错"AttributeError: 'module' object has no attrib ...

  6. "Emgu.CV.CvInvoke”的类型初始值设定项引发异常 解决办法

    系统win7 32位,只在这一台电脑上出现这种问题,已知VS编译是X86,在数台电脑上测试都正常. 后来把opencv的dll路径例如 E:\...\x86  加入到系统环境变量中就正常了. emgu ...

  7. FireFox每次访问页面时检查最新版本

    FireFox每次访问页面时检查最新版本 浏览器都有自己的缓存机制,作为开发人员,每次js的修改都要清空缓存,显然很不方便.而firefox并没有提供ie那样的设置. 下面的方法就可以非常方便的设置f ...

  8. 以空白符结尾的 alias

    网上经常有人问这个问题:为什么我写的 alias 在 sudo 下就不管用了? $ alias 'll=ls -l' $ sudo ll a-private-dir sudo: ll: command ...

  9. tyvj1125 JR's chop

    描述 JR有很多双筷子.确切的说应该是很多根,因为筷子的长度不一,很难判断出哪两根是一双的.JR家里来了K个客人,JR留下他们吃晚饭.加上JR,JR的girl friend和JR的朋友内涵,共K+3个 ...

  10. rails enum用于存储数据

    http://api.rubyonrails.org/classes/ActiveRecord/Enum.html 新的项目中有一个字段是展示类型,可以用下拉框去做,用string存储具体的类型字段. ...