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. Notepad++编写Markdown

    Markdown语法高亮 下载userDefineLang_markdown.xml 打开Notepad++的 Language 菜单,选中底部的 Define your language... 在 ...

  2. WPF基础到企业应用系列6——布局全接触

    本文转自:http://knightswarrior.blog.51cto.com/1792698/365351 一. 摘要 首先很高兴这个系列能得到大家的关注和支持,这段时间一直在研究Windows ...

  3. RAM、DRAM、SD卡

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

  4. Alpha阶段第九次Scrum Meeting

    情况简述 Alpha阶段第九次Scrum Meeting 敏捷开发起始时间 2016/11/2 00:00 敏捷开发终止时间 2016/11/3 00:00 会议基本内容摘要 汇报进度,安排工作 参与 ...

  5. 数据结构作业——ギリギリ eye(贪心+优先队列/贪心+并查集)

    ギリギリ eye Description A.D.1999,由坠落地球的“谜之战舰”带来的 Over Technology,揭示了人类历史和远古文明之间的丝丝联系, 促使人类终止彼此间的战争,一方面面 ...

  6. CSS书写顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...

  7. 创建一个点状注记(MarkerElement)

    1.根据XY创建一个点 /// <summary> /// 根据x y创建新点 /// </summary> /// <param name="dX" ...

  8. [java] 可视化日历的实现(基于Calendar类 )

    写在前面 博文安排顺序如下 1.写在前面 2.源码 3.思路 4.相关知识 该小程序是对Date类及其相关类的复习 要求如下图:实现可视化日历 实现思路 1.先从键盘输入指定格式的字符串(str)2. ...

  9. Python之路【第十八篇】Django小项目webQQ实现

    WEBQQ的实现的几种方式 1.HTTP协议特点 首先这里要知道HTTP协议的特点:短链接.无状态! 在不考虑本地缓存的情况举例来说:咱们在连接博客园的时候,当tcp连接后,我会把我自己的http头发 ...

  10. 日期控件jsdate用法注意事项

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...