本文详细介绍了移动端H5开发中的配置项，包括Viewport设置、Web App模式、全屏显示等；HTML相关技巧，如调用系统功能、禁用Input首字母大写；以及样式处理，如禁用长按选中、自定义滚动条样式等。通过这些技巧，可以提升H5在移动端的用户体验。
移动端原生H5开发
配置项
1. Viewport
<!-- 让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- 针对一些不识别viewport的浏览器，如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 针对微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">不设置的话，相当于用手机访问PC端页面一样，无初始缩放和页面宽度
2. Apple设备使用Web App模式（一般用于SPA应用，因为如果在里面点击还是跳转其他链接的话，还是会从Safari打开的）
<!-- 设置Web应用是否以全屏模式运行 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏（屏幕顶部栏）的样式，default为白色，black为黑色，black-translucent为透明 -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- 设置添加到主屏幕后的图标 -->
<link rel="apple-touch-icon" href="xxx.png">
<!-- 设置启动动画，避免加载时出现白屏 -->
<link rel="apple-touch-startup-image" href="xxx.png">
<!-- 设置添加到主屏幕后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题">在Safari浏览器点击分享按钮-添加到主屏幕，然后在桌面打开
3. 强制浏览器全屏(UC/QQ)
<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">就是浏览器全屏，隐藏浏览器上下的状态栏
4. 忽略
<!-- 忽略网页自动识别数字为电话号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略网页自动识别邮箱账号 -->
<meta name="format-detection" content="email=no">某些浏览器识别成功之后会将号码或者邮箱转换成a标签
5. Windows Phone点击无阴影
<meta name="msapplication-tap-highlight" content="no">类似于css的-webkit-tap-highlight: transparent
6. 清除浏览器缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache
HTML项
1. 调用系统功能
<!-- 拨号 -->
<a href="tel:10086">打电话给: 10086</a>
<!-- 短信 -->
<a href="sms:10086">发短信给: 10086</a>
<!-- 邮件 -->
<a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>
<!-- 选择照片或者拍摄照片 -->
<input type="file" accept="image/*">
<!-- 选择视频或者拍摄视频 -->
<input type="file" accept="video/*">
<!-- 多选 -->
<input type="file" multiple>2. 取消Input在Apple设备中，英文首字母默认大写
<input autocapitalize="off" autocorrect="off">3. :active伪类失效
<!-- 注册一个空的touchstart事件 -->
<body ontouchstart=""></body>4. 唤醒App
<a href="weixin://">打开微信</a>让Android或者Ios开发者提供一个App协议给你就可以了，让人尴尬的是，我们不知道用户到底有没有安装此App应用，所以需要Javascript来配合，当用户已安装直接跳转到App，没有安装跳到下载地址，详情在本文中的Javascript项</
最低0.47元/天 解锁文章
扫一扫
5756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
