移动端web开发

概述

随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。

移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。

【H5页面、微网页、微站、wap站、webAPP】

如:京东商城手机版，淘宝触屏版，苏宁易购手机版

相关阅读：

WebApp与Native App的区别？

在高端智能手机系统中有两种应用程序：一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp（基于WEB形式的应用程序）

Native App：

1、开发成本非常大一般使用的开发语言为JAVA、C++、Objective-C

2.能调用系统的 api 优点是性能更好，实现的一些非常酷的交互效果,但是发布 app 流程繁琐，而且不跨平台。

3.更新体验较差（每一次发布新的版本，都需要做版本打包，且需要用户手动更新）

Web App：

1、开发成本较低

使用web开发技术就可以轻松的完成web app的开发

2、升级较简单

升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉

3、维护比较轻松

和一般的web一样，维护比较简单

优点是跨平台，修改方便缺点是不能调用原生的 api, 而且用户体验不如原生 app 好

移动端浏览器及内核

移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等

国内用户首选使用移动浏览器的占比中：uc浏览器，qq浏览器，360浏览器，为用户手机浏览器平台首先前三位

内核：

对于安卓手机而言，使用率最高的就是webkit内核，国内目前尚无自主研发的内核，都是基于开源内核webkit上进行的二次开发，并不是完全的自主内核

对于苹果手机而言：由于系统封闭，不允许除苹果系统自带的浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均在Safari内核的基础上进行开发；

终端分为三个：pc iPad 移动端

移动端web开发现状

• 移动端浏览器大多基于webkit内核， 对H5+CSS3支持良好

• 手机的屏幕尺寸非常多，不同的移动设备有不同的屏幕尺寸、视口大小

设备的屏幕尺寸查询: https://uiiiuiii.com/screen/

我们开发的网页，在不同的手机上，若想展示效果一致，必然不是为每一种型号手机都开发一套页面，而是要尽可能的能适配所有

视口

了解视口相关概念及理想视口的设置 是移动Web开发非常重要环节。

什么是视口？

• 视口简单来说就是浏览器显示页面内容的区域。

• 视口：浏览器显示内容的屏幕区域，相当于PC端浏览器可视区 (白板区域)

• 在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；

视觉视口

【视觉视口是指用户当前看到区域】即设备宽度

布局视口

移动设备的浏览器都默认设置 了一个viewport元标签，定义了一个虚拟的布局视口，,CSS 布局将会根据它来进行计算，并被它约束。

一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px

所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。

不同设备大小也不相同由设备出厂设置决定，下图列出了一些设备上浏览器的默认viewport的宽度。

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height

如果要显式设置布局视口，可以使用 HTML 中的 meta 标签进行设置

理想视口

布局视口对用户不友好，基于理想视口设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，网站的所有内容都可以正常的呈现给用户。

为了网站的移动端能有更好的浏览器和阅读而设置 （苹果公司引入的理想视口的概念）

理想视口可以使用 HTML 中的 meta 标签显式设置布局视口等于设备宽度

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

创建一个虚拟窗口，窗口宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放

content属性：

- width 虚拟窗口的屏幕宽度 device-width 设备宽

- initial-scale 页面初始缩放比

- user-scalable 是否允许用户手动缩放

- user-scalable=no 不允许用户手动缩放

- user-scalable=yes 允许用户手动缩放，默认值

- maximum-scale 最大缩放比

- minimum-scale 最小缩放比

height : 设置viewport的高度（我们一般而言并不能用到 ）

​

常见的手机设置的大小

iphone4/5/SE 320

iphone6/7/8 375

iphone6plus、 iphone7plus、 iphone8plus 414

属性说明:

width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放比率
minimum-scale	[0.0-10.0]	定义最小缩放比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义最大缩放比例，它必须大于或等于minimum-scale设置
user-scalable	yes （1）/ no（0）	定义是否允许用户手动缩放页面，默认值 yes