从零开始学习移动端Web开发

article/2025/11/7 13:39:46

背景

这里写图片描述

近年来，随着智能手机的普及，移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发，转向了移动端Web开发或者是混合开发，既然有需求，那就让我们一起来学习移动端Web开发吧。本文旨在让读者以最快的时间了解移动Web开发基础以及介绍一些常见问题。

基础准备

首先我们要有HTML/HTML5、CSS/CSS3基础知识（会简单的切图就可以了），如果能懂点JS那就更好啦。

其次我们要清楚一些基本概念，不然出去吹牛逼听不懂别人说的东西或者自己说出来是非常明显的错误就很尴尬啦，为了能自信满满的吹水，我们来了解下面几个基本概念吧。

移动端网页开发
在移动端表现良好的页面，如新浪网，腾讯新闻网，手机凤凰这些网站页面在移动端也有不错的表现。
移动端web app开发
简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。或者更多的是如手机taobao，手机美团，手机微博等类似web app，他们没有很明显的使用一些native功能，但是交互、设计的和app类似的网页，它是要依托浏览器来查看的。当然近期行业内还推出了多种形式的类app/webapp应用技术，比如大家熟知的微信小程序、谷歌推出的PWA（获得与安卓原生应用同等权限）、DCloud公司推出的流应用（获得W3C及国内手机厂商支持）等。
hybrid app开发
也叫【套壳开发】，简单来说就是通过写特定的代码生成跨平台的web app，类似react native，phonegap，cocos2d等。可以用一些前端native开发框架或者是在移动端网页的基础上打包生成app。

基本概念有了，最后我们要有一张基于移动端尺寸的设计稿，比如750px，720px，640px等都可以。比如下面这张图。接下来我们就来实现这个移动端页面。

动手实践

HTML示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /><title>舰炮与鱼雷特权</title></head><body>具体布局就不展示了</body>
</html>

html代码中最关键的就是meta标签设置，开发移动端页面首先一定要设置viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

device-width - 设备的宽度
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放

当然这只是一种方案，其次是一些辅助优化功能，常用的有如下meta标签：

<meta content="telephone=no,email=no" name="format-detection">
//禁止自动识别电话号码和邮箱
<meta content="yes" name="apple-mobile-web-app-capable">
//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
<meta name="apple-touch-fullscreen" content="yes" />
//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入

CSS示例

//部分重置
body {word-wrap: break-word;font: 16px/1.5 Helvetica, Arial;//这里是设置字体，Helvetica字体在移动端各系统都支持（都不支持微软雅黑）color: #333;-webkit-text-size-adjust: none; //设置文本不会放大，普通网页在移动端打开文本是会跟随网页结构缩放的
}
body *{-webkit-tap-highlight-color: transparent;//在一些手机上，如iphone，点击按钮等元素会出现点击态的背景色，设置为透明就看不出来了-webkit-user-select:none;//设置元素内的文字及其子元素将不会被选中
}
//部分样式
.pack-sub em{width:38px;height:20px;display: inline-block;margin-left: 3px;font-size: 14px;background-color: #ff599b;border-radius: 20px;
}

css中，关键点一是重置样式和PC端有点不同，二是css的数值应该是设计稿中的一半，以750px为例（因为最常见的iPhone6的屏幕尺寸为375px，设计稿是手机屏幕的两倍大小，所以css中的数值按设计稿一半计算）

最终效果

问题和优化

细心的我们发现，目前的实现在iPhone6下是很友好的，但是在其他设备上，比如小屏的iPhone4或者类型更多的安卓手机，表现并不是很好。这时我们会去搜索移动端适配解决方案，有js+rem的方式，也有淘宝Flexible的解决方案，我们应该去了解并实践咯。
传送门：
移动web适配利器-rem
使用Flexible实现手淘H5页面的终端适配

移动端开发的优劣

优势：
移动端开发的优势简单来说就是兼容性更好了，基本上只需要针对webkit内核的浏览器做兼容就好了，而且本身这类浏览器对html5、css3的兼容性就比较高，所以PC端不太敢用的属性就大胆的用起来吧。
移动端还可以使用很多设备接口来实现更好的交互效果，比如陀螺仪实现类似3D VR效果，多指操作实现图片缩放旋转，获取地理位置等。

劣势：
移动端目前设备类型特别多，移动端的适配比较难处理，移动端的事件也是一个难题，比如tap延迟，点击穿透等问题。

扩展

要想处理好移动Web开发，我们还需要很多知识储备，很多问题需要找到比较好的解决方案，下面列举一些常见问题及可供学习的资料。
1.设备视口及像素比
2.浅谈移动Web开发（上）：深入概念
3.移动端自适应方案
4.移动端 Web 开发前端知识整理
5.移动端事件介绍

总结

本文主要介绍了如何快速切入到移动Web开发，并介绍了开发中可能会遇到的常见问题，虽然没有具体介绍，因为这不是本文的主要目的，目的是希望读者在阅读之后对移动Web开发有个大致的了解，然后在实际开发工作中不断积累。
本文介绍方式是根据我自己的学习方式来描述的，先实现一个DEMO，获得一点成就感之后才有勇气面对开发中无数的坑嘛！希望对大家有帮助！