轩枫阁

首页 / 移动前端 / H5 / 移动端网页重构指南 – HTML篇

移动端网页重构指南 – HTML篇

前言

本文介绍移动端重构的基础内容,主要包括基本模板、viewport、桌面图标、各种meta属性、QQ浏览器及UC浏览器私有meta。

基础篇

基本模板

文档声明

该声明向下兼容,同样适用于不支持HTML5标签的浏览器。

字符编码

viewport

设置视窗宽为设备宽度,默认不缩放,不允许用户缩放。

忽略电话号码和邮箱识别

全屏模式

在iOS中 隐藏工具栏和菜单栏。

顶部状态栏背景色

顶部状态栏(手机信号、时间、电池)的背景颜色。默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

设置缓存

手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

桌面图标

iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。

启动画面

iOS下页面启动加载时显示的画面图片,避免加载时的白屏。

可以通过madia来指定不同的大小:

其它最佳实践

标签语义化,视产品需求考虑SEO、无障碍因素。合理使用HTML5 Element (<header><nav><section><article><footer>等)。避免<div>标签泛滥。

 

浏览器私有及其它meta

以下待验证

QQ浏览器私有<META>

全屏模式

强制竖屏

强制横屏

应用模式

 

UC浏览器私有<META>

全屏模式

强制竖屏

强制横屏

应用模式

 

其它<META>

针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

微软的老式浏览器

windows phone 点击无高光

参考自:腾讯KM – alfiehe

130/458
132/458

相关文章

文章评论

  • 支持一下博主

  • 发现一个好地方啊,以后会多来学习学习~~

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]