1、使用多种分别率设备:利用viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

2、删除默认的苹果工具栏和菜单栏,如手机号自动加下划线:
<meta name="apple-mobile-web-app-capable" content="yes">
content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

3、控制苹果手机状态栏样式:<meta name="apple-mobile-web-app-status-bar-style" content="black">

4、当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。
-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
*{-webkit-touch-callout:none;}

5、CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等,也就是,让页面内容不可选,使更像原生应用:
*{-webkit-user-select:none;}

6、防止出现点击页面元素出现闪一下黑色的现象:
*{-webkit-tap-highlight-color:rgba(255,255,255,0)}

7、滑动更流畅

-webkit-overflow-scrolling: touch
overflow-scrolling: touch

h5做移动应用开发部分技巧的更多相关文章

  1. iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式

    iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...

  2. 10个Visual Studio原生开发调试技巧

    10个Visual Studio原生开发调试技巧(1) 2013-05-29 13:30 佚名 开源中国 我要评论(1) 字号:T | T 以下的列表中你可以看到写原生开发的调试技巧(接着以前的文章来 ...

  3. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  4. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  5. iOS之H5和Native混合开发

    今天需要用到一个H5和Native 混合开发的项目,简单的写一点入门的东西,很简答: 先介绍一下简单的配置步骤: 1.新建项目:SB拖一个UIWebView 按住Ctrl 拖线delegate 设置为 ...

  6. TP开发小技巧

    TP开发小技巧原文地址http://wp.chenyuanzhao.com/wp/2016/07/23/tp%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A7/ ...

  7. 移动Web开发小技巧

    移动Web开发小技巧 添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用  ...

  8. Linux c c++ 开发调试技巧

    看到一篇介绍 linux c/c++ 开发调试技巧的文章,感觉挺使用,哪来和大家分享. 通向 UNIX 天堂的 10 个阶梯Author: Arpan Sen, 高级技术人员, Systems Doc ...

  9. BizTalk开发小技巧

    BizTalk开发小技巧 随笔分类 - Biztalk Biztalk 使用BizTalk实现RosettaNet B2B So Easy 摘要: 使用BizTalk实现RosettaNet B2B ...

随机推荐

  1. [Spring boot] Application properties and configurations

    We can use different application properties application.properties: server.port=9090 application-pro ...

  2. Node.js meitulu图片批量下载爬虫1.03版

    //====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...

  3. Mysql 中文中繁杂的字 插入报错的 解决方案

    首先 数据库默认编码选用 utf8 连接字符串也相应改成utf8,不能是gb2312

  4. 用聚合数据API(苏州实时公交API)快速写出小程序

    利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如“苏州实时公交”小程序,选择的是苏州实时公交API. 苏州实时公交API文档:https://www ...

  5. 谷歌Cartographer学习 -快速安装测试

    参考资料:https://www.cnblogs.com/hitcm/p/5939507.html PC下面进行安装: 遇到的问题如下 1.首先安装ceres solver 在编译的时候,如果是低配的 ...

  6. 最小生成树之Kruskal算法和Prim算法

    依据图的深度优先遍历和广度优先遍历,能够用最少的边连接全部的顶点,并且不会形成回路. 这样的连接全部顶点并且路径唯一的树型结构称为生成树或扩展树.实际中.希望产生的生成树的全部边的权值和最小,称之为最 ...

  7. nginx跨域(转2)

    当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...

  8. Java 8中的 Streams API 详解

    为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...

  9. Atitit. Async await 优缺点 异步编程的原理and实现 java c# php

    Atitit. Async await 优缺点 异步编程的原理and实现 java c# php 1. async & await的来源1 2. 异步编程history1 2.1. 线程池 2 ...

  10. 没有博士学位,照样玩转TensorFlow深度学习

    教程 | 没有博士学位,照样玩转TensorFlow深度学习 机器之心2017-01-24 12:32:22 程序设计 谷歌 操作系统 阅读(362)评论(0) 选自Codelabs 机器之心编译 参 ...