My-Notes

002.移动 Web 开发

10分钟阅读

近年来，随着智能手机的普及，移动端开发受到了异常的关注。

本文旨在让具有一定开发经验的 Web 前端人员以最快的速度了解移动 Web 开发基础以及介绍一些常见问题

移动 Web 特点

  1. 移动端浏览器大都是（几乎 99%）基于 Webkit 内核（具体可参见：移动端浏览器内核）
  2. 移动端浏览器对 HTML5/CSS3 的支持非常好

启航

HTML 篇

首先，使用 HTML5 头部声明

之后是 meta 标签设置，开发移动端页面首先一定要设置 viewport：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  • width=device-width：设置视窗宽度为设备视窗宽度，还可以固定宽度，例如： width=640 则是 640px 的宽度（常见于微信）
  • initial-scale=1.0：设置默认缩放比例为 1
  • minimum-scale=1.0、maximum-scale=1.0：最小允许缩放比例和最大允许缩放比例
  • user-scalable=no：禁止用户自由缩放，默认值为 yes

提示：一般设置了 user-scalable=no 就不用使用 minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了

其次是一些辅助优化功能，常用的有如下 meta 标签：

<!-- 禁止浏览器自动识别手机号码和邮箱地址 -->
<meta name="format-detection" content="telephone=no,email=no">
 
<!-- iphone！全屏模式浏览 -->
<meta name=“apple-mobile-web-app-capable” content=“yes”>
 
<!-- iphone！顶端的状态条的样式（颜色），其值有：default（白色，默认）、black（黑色）和 black-translucent（灰色半透明）-->
<meta name=“apple-mobile-web-app-status-bar-style” content=“black”>
 
<!-- iphone！如果把一个 web app 添加到了主屏幕中，那么从主屏幕中打开这个 web app 则全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes">
 
<!-- iphone！将应用添加到手机主屏幕，会有一个 icon 可以直接进入 -->
<link rel="apple-touch-icon" href="/static/images/icon.png">

提示：其中 iphone！ 代表 iphone 设备中的 safari 浏览器私有 meta 标签

CSS 篇

CSS 中，关键点是重置样式和 PC 端有点不同

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /* 使用无衬线字体 */
}
 
a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
 
html, body {
    -webkit-user-select: none; /* 禁止选中文本 */
    user-select: none;
}
 
button,input,optgroup,select,textarea {
    -webkit-appearance: none; /* 去掉 webkit 默认的表单样式 */
}
 
a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 去掉 a、input 和 button 点击时的蓝色外边框和灰色半透明背景
}
 
input::-webkit-input-placeholder {
    color: #ccc; /* 修改 webkit 中 input 的 planceholder 样式 */
}
 
input:focus::-webkit-input-placeholder {
    color: #f00; /* 修改 webkit 中 focus 状态下 input 的 planceholder 样式 */
}
 
body {
    -webkit-text-size-adjust: 100% !important; /* 禁止 IOS 调整字体大小 */
}
 
input::-webkit-input-speech-button {
    display: none; /* 隐藏 Android 的语音输入按钮 */
}

使用 Flex 布局

小技巧篇

自定义苹果图标

在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180×180

自定义 favicon

<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">

定义浏览器点击行为

<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>

定义上传文件类型和格式

<input type=file accept="image/*">

上面的文件上传框中，accept 可以限制上传文件的类型，参数为 image/* 是所有图片类型，点击会弹出图库，也可以指定图片格式，参数设置成 image/png 则可以限制图片类型为png；参数如果为 video/* 则是选择视频的意思；accept还可以设置多个文件格式，语法为 accept="image/gif, image/jpeg"

使用 box-shadow 改变（挡住）表单自动填充后的黄色

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow:inset 0 0 0 1000px #fff;
}

使用 border 绘制小三角

原理是：上下和左右的边框对接其实是个斜角，利用这个特性，使其中一边的边框透明，另外一边写成想要的颜色并隐藏对边，就可以变成小箭头形状

border-width: 10px 10px 10px 0; //左箭头
border-color: transparent #fff;
border-style: solid;
width: 0;

对话框写法

<div class="box">闻道有先后，术业有专攻！</div>
.box {
    position: relative;
    padding: 0 20px;
    width: 380px;
    height: 80px;
    border-radius: 8px;
    background: #efefef;
    font-size: 18px;
    line-height: 80px;
}
 
.box:after {
    position: absolute;
    top: 50%;
    left: -15px;
    z-index: 1;
    display: block;
    margin-top: -15px;
    width: 0;
    border-color: transparent #efefef;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    content: "";
}

附录

移动端浏览器内核

手机浏览器种类 ：

UC 浏览器，QQ 浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器

国内的 UC、QQ、百度等手机浏览器都是根据 Webkit 修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于 Android 修改的

全球仅有四大浏览器内核：

目前全球仅有四个独立的浏览器内核，分别为微软 IE 的 Trident、网景最初研发后卖给 Mozilla 基金会并演化成火狐的Gecko、KDE 的开源内核 Webkit 以及 Opera 的 Presto

其中，Presto 是历史最悠久的内核

目前微软的 Trident 在移动终端上主要为 WP7 系统内置浏览器

Opera 的 Presto 内核在所有联网设备上都使用，移动终端上主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋 HD Beta 版

Webkit 内核的适用范围则较为广泛，Android 原生浏览器、苹果的 Safari、谷歌的 Chrome（Android4.0 使用）都是基于 Webkit 开源内核开发的

从实际情况出发：

对于 Android 手机而言，使用率最高的就是 Webkit 内核，我们看到很多手机浏览器厂商都宣称有着自主内核，比如手机 UC 就号称采用了 U3 内核、而华为也经常标榜自己的天天浏览器采用了 T9 内核，事实上，他们都是基于开源内核 Webkit 进行二次开发的，并不是完全的自主内核

而在 iOS 以及 WP7 平台上，由于系统封闭，不允许除系统自带浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均为在 Safari 或者 IE 内核的基础上进行二次开发，优化功能和自制 UI。比如海豚、遨游等浏览器就是直接采用系统自带浏览器的内核，这点从这几款浏览器的 HTML5 评分与系统自带浏览器评分结果完全一致就可以看出

四大浏览器内核优缺点：

  1. Trident：因为在早期 IE 占有大量的市场份额，所以以前有很多网页是根据这个 Trident 的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全 Bug
  2. Gecko：优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存
  3. Webkit：优点就是 Webkit 拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示
  4. Presto：Presto 内核被称为公认的浏览网页速度最快的内核，同时也是处理 JS 脚本最兼容的内核，能在 Windows、Mac 及 Linux 操作系统下完美运行

移动端适配解决方案

关系图谱