HTML5移动开发，细微决定美感

自从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,但是，小编无法测试所有的手机型号，无法尽善尽美。

本文转载自宝原科技。