前言

现在的移动端的使用率，已经远远大于PC端了。前端在移动端开发领域也起到了越来越大的用处。但是，移动端复杂的开发环境，往往是一大问题。谷歌开源Android以来，各大手机厂家不断对其内核进行修改，形成自己的版本（包括浏览器方面）。在移动端开发时，我们往往会遇到几个主要的开发环境：Android webview、UI webview（IOS）、微信的X5浏览器内核、UC浏览器等。可能，我们开发时时常会使用chrome来进行调试，但是真实用户使用时，往往只会使用UC或者QQ浏览器。

正文

正是这样子的环境，导致我们的开发成本逐渐地增加，开发问题层出不穷。本篇我将对移动端开发时所遇到的问题进行一个总结，便于之后碰到相同的问题能够轻松地解决。

meta元素基础问题

禁止页面缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

禁止电话号码识别

<meta name="format-detection" content="telephone=no" />

禁止Android邮箱识别

<meta name="format-detection" content="email=no" />

移动端font-family问题

两个手机系统Android和iOS系统，对于中文来说，都不支持微软雅黑，但是系统自带的字体与微软雅黑的字体差异不大，都是无衬线字体，因此中文可以默认使用系统自带字体。而英文字体的话，可以使用Helevatic字体，系统都是支持的，设置如下：
font-family: Helevatic;

px或者rem的选择问题

对于那些页面比较简单的设计图来说，使用px就可以了，再加上简单的弹性布局，并不需要使用rem；而对于那些页面复杂，内容繁多的设计图来说，例如，手淘主页，这种是需要使用rem来适配大小机型的。

click 300ms延时问题

开发过移动端的人，总会了解过这300ms的来历（简述为：当手机访问PC网页时，可以双击进行缩放，因此会在第一次点击之后，延迟300ms，看是否会进行第二次点击。）。那么，对于正常的网页来说，这300ms的慢启动，会影响用户体验的。我们可以使用fastclick或者zepto.js的touch模块中的tap事件(touchstart+touchmove+touchend)来替代click事件。或者可以直接使用touchstart来替代click事件。整个事件执行顺序：touchstart->touchmove->touchend->click

retina高清屏

现在的手机高清屏越来越多了，何为retina屏幕？即那些一个点，显示多个像素的屏幕。最早是由苹果公司开发的。在这种高清屏下，往往原先显示的正常的图片会被放大，而导致模糊的情况。这种情况下，我们就得让设计师准备多张图，如img@1x.png，img@2x.png。这样之后，我们可以写一个媒体查询，对图片进行选择。

1px边框问题

laizimo / zimo-article

移动端开发问题总结 #23

前言

正文