从HTML5霸气上线以来，便迅速占领了数百万开发者的使用高地，知名企业犹如Google、Facebook以及亚马逊等纷纷从 Adobe Flash 转移到了 HTML5。于是在移动时代来临之际，HTML5也顺势成为开发者们的重点迁徙对象，成功引领潮流。然而在开发的过程中，并不是每个开发者都能将细微之处做到极致，那如何才能让你的H5在汪洋大海中独树一帜呢？本文将分享几个妙招，让你的开发更完美。

单页内容控制

移动端H5活动页面经常需要分享到社交App（如微信、QQ等）中，而用移动设备查看页面时会发现，微信浏览器中有顶部导航栏，但QQ内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域。

为了避免打开的web与浏览器导航栏发生冲突，一般会使用多媒体自适应的形式，根据屏幕像素的不同，向上的间距也要相应进行变化，而我们设计常用尺寸是750 x 1334 / 640 x 1136，因此在设计环节就需要考虑单页内容，页面底部要预留一定的空白，这样在微信或QQ中才不会被遮住。

如下图（QQ内置浏览器）：页面设计尺寸为 750 x 1334，顶部占用 150px，底部占用 110px，共占用了 260px，因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时，使用 Chrome 浏览器模拟设备大小，将该尺寸（750*1074）存下来，用于实时查看移动端页面效果。

H5页面窗口调整

根据HTML5 “一次开发，多处兼容”的特性，能够横跨多种平台和设备，而利用 meta 标签对页面进行缩放，使得我们可以直接根据设计稿来进行页面的编写，不用再进行单位的换算等等，在此注意调整页面窗口，禁止用户缩放就能省去很多不必要的麻烦。

识别错误源头并更改

在做移动端的web开发的时候； iOS 上的Safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单提示用户是否拨打电话。别的地方倒也罢了，如果在用户名中出现数字（例如手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”），这种版式会让你的app瞬间掉价，按照下列方式便可避免。

禁用后，如果想要页面识别电话功能，做法如下。

同理，Android平台中也会无故出现对邮箱地址的识别，将telephone 换成email就OK了。

圆图边框设置

在安卓的开发平台上，当圆形图片使用 border 时，边框就任性的变形了（如上图所示）

这时只需要给 img 外嵌套一个元素，为其使用圆角，问题就解决了。

实现打电话&发短信

1.打电话

2.发短信

测试二维码图片

有时候扫描二维码之后，会跳转至某个地址，不幸的话微信或者QQ会对这个地址进行温馨提醒，如下图所示：

这样会阻止部分用户继续访问，从而无法很好的将用户引导到活动想要推广的产品/品牌页面，如 App 的下载页面等。因此二维码的扫描测试不能少。

举个例子，如果二维码扫描结果是应用的下载地址的话，可以使用应用宝的微下载地址来生成二维码，这是不会被“温馨提醒”的。

微信二维码

一般会碰到下面两个问题

1）同一个页面里要是有两个二维码，长按扫描总是只能扫出 左侧/第一个 二维码。

解决：可视区域内只能出现一个二维码。

2）使用 meta 标签缩放页面后长按二维码图片无反应。

解决：使用了以下代码之后，就能长按识别二维码了~

Retina 显示屏

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样物理尺寸的屏幕上，苹果设备的2倍retina显示屏中，像素点1个变为4个,在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍，在此给出的前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

// 例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px.css{font-size:20px;}

禁止IOS和Android用户选中文字

禁止IOS和Android用户选中文字，只需按照下列方法即可。

改变placeholder颜色值

如何改变webkit表单输入框placeholder的颜色值呢？来试试下面的方法。

此外，HTML5开放的标准支持，还有助于为碎片化的移动设备、不同的屏幕尺寸、差异化的平台和操作系统开发应用。注意到了上面这些问题，应该能让你的水平提高一个level,但是，小编无法测试所有的手机型号，无法尽善尽美。

本文转载自宝原科技。

来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过，HTML5 Web APP的出现能否在未来取代移动应用，就目前来说，还是个未知数。那么，有什么办法，既可以使用HTMl5开发应 用，又可以将其简单封装成APK文件呢？

一、Android SDK中的WebView

1.在要Activity中实例化WebView组件：WebView webView=new WebView(this);

2.调用WebView的loadUrl()方法，设置WevView要显示的网页：

? 互联网用：webView.loadUrl("http://www.qietu.com");

? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.调用Activity的setContentView( )方法来显示网页视图

4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面

5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。

? <uses-permission android:name="android.permission.INTERNET" />

缺点：如果是载入的是普通网页，没有什么问题，但如果是html5,封装后，在android2.3以上才能正常访问，android2.2及以下，SDK中的WebView还没完全支持HTML5

下面是具体例子：

MainActivity.java

??? package com.android.webview.activity; ?

??? import android.app.Activity; ?

??? import android.os.Bundle; ?

??? import android.view.KeyEvent; ?

??? import android.webkit.WebView; ?

??? public class MainActivity extends Activity { ?

??????? private WebView webview; ?

??????? @Override

??????? public void onCreate(Bundle savedInstanceState) { ?

??????????? super.onCreate(savedInstanceState); ?

??????????? //实例化WebView对象 ?

??????????? webview=new WebView(this); ?

??????????? //设置WebView属性，能够执行Javascript脚本 ?

??????????? webview.getSettings().setJavaScriptEnabled(true); ?

??????????? //加载需要显示的网页 ?

??????????? webview.loadUrl("http://www.qietu.com/"); ?

??????????? //设置Web视图 ?

??????????? setContentView(webview); ?

??????? } ?

??????? @Override

??????? //设置回退 ?

??????? //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法 ?

??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?

??????????? if ((keyCode==KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?

??????????????? webview.goBack(); //goBack()表示返回WebView的上一页面 ?

??????????????? return true; ?

??????????? } ?

??????????? return false; ?

??? }

在AndroidManifest.xml文件中添加权限

??? <?xml version="1.0" encoding="utf-8"?>

??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"

????????? package="com.android.webview.activity"

????????? android:versionCode="1"

????????? android:versionName="1.0">

??????? <uses-sdk android:minSdkVersion="10" />

??????? <application android:icon="@drawable/icon" android:label="@string/app_name">

??????????? <activity android:name=".MainActivity"

????????????????????? android:label="@string/app_name">

??????????????? <intent-filter>

??????????????????? <action android:name="android.intent.action.MAIN" />

??????????????????? <category android:name="android.intent.category.LAUNCHER" />

??????????????? </intent-filter>

??????????? </activity>

??????? </application>

??????? <uses-permission android:name="android.permission.INTERNET"/>

??? </manifest>

二、使用PhoneGap

??? PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系 人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如 iPhone的iPhone SDK，Android的Android SDK等，

详细方法请见：http://phonegap.com/start#android

优点：在Eclipse中加入SDK，编程自由，完美适应不同设备屏幕大小，适合高手使用。

缺点：没有使用布局，直接加载网页，不能添加广告。

----------------

切图网（qietu.com）最早将psd转html服务模式带到国内，并首个提供响应式、webapp前端开发的公司。专注web前端开发技术，关注用户体验，加我们公众微信账号：qietuwang（长按复制）

子创意，关注前沿科技和创业资讯，提供专业的互联网开发，产品设计，媒体运营支撑服务和咨询。如有需求欢迎朋友们合作和咨询。

更多资讯，点击上方【订阅】，订阅橘子创意。

一、 摘要

今天给大家介绍有关HTML5移动开发APP开发框架,这里主要给大家介绍10款移动APP开发框架,下一篇文章将给大家具体演示一下如何用这些框架来搭建一个移动APP应用.

十款移动APP开发框架:

1.jquery mobile框架

2.bootstrap框架

3.ionic框架

4.Mobile Angular UI框架

5.Intel XDK框架

6.Appcelerator Titanium框架

7.Sencha Touch框架

8.Kendo UI框架

9.PhoneGap框架

10.mui框架

1.jquery mobile框架

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。

2.bootstrap框架

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

3.ionic框架

Ionic 是一个强大的 HTML5 应用程序开发框架，可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

4.Mobile Angular UI框架

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。

Mobile Angular UI的关键字有：

1.Bootstrap 3

2.AngularJS

Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。

AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate

响应式媒体查询是将bootstrap作为单独的文件，你只需要包含你所需要的东西。

Mobile Angular UIu并不包含任何jQuery依赖，你需要做的只是通过一些AngularJS指令创建友好的用户体验。

5.Intel XDK框架

Intel发布了其首个版本基于web的编程工具，可帮助开发者为Android和iOS开发移动应用。

这款免费的软件名为Intel XDK，实际上这是今年2月份Intel收购的AppMobi软件的重新包装后的版本，所以并非新鲜事物。开发者可用此软件开发基于HTML5的应用，并 用于移动设备中。

6.Appcelerator Titanium框架

Titanium 是一个跟手机平台无关的开发框架，用来开发具有本地应用效果的Web应用。当前主要支持 iPhone 和 Android 手机。

主要提供的API包括：

2D/3D animations

Geo-location, compass, and maps

Augmented reality features

Social app authentication and native client support for email

SOAP or REST API calls

Audio, video, and image capture and playback

Taps into local filesystem and SQL lite databases

Accesses photo gallery or address data

橘子创意，关注前沿科技和创业资讯，提供专业的互联网开发，产品设计，媒体运营支撑服务和咨询。如有需求欢迎朋友们合作和咨询。

更多资讯，搜索微信公众号juzimedia，关注橘子创意。