html 移动端

移动端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 好

移动端web开发现状

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

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

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

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

视口

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

什么是视口？

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

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