万变不离其宗，道法自然！

虽然H5的小项目一波又一波，但有一个东东基本没什么变化，那就是整个页面的框架结构。

我所常用的H5常用页面框架如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">
　　<link rel="stylesheet" href="css/*.css" type="text/css">

<title>主结构</title>

</head>

<body>

    页面内容页面内容
　　<script type="text/javascript" src="js/*.js"></script>

</body>

</html>

meta设置部分：

viewport设置为屏幕的宽度，禁用缩放

apple-mobile-web-app-capable：当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

apple-mobile-web-app-status-bar-style：将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

telephone=no：禁用自动识别手机号

email=no：禁用自动识别邮箱

样式JS引入：

head部分link方式引入样式

body尾部引入JS

以上代码归属于我的github常用H5代码整理项目（详见其中template）：https://github.com/xw5/mobile-code/

欢迎clone,欢迎star,一起学习，一起进步

H5常用代码：页面框架的更多相关文章

  1. H5常用代码：适配方案4

    前面有分享了4种适配方案,但始终是通过手动缩放或者视口缩放来实现,用来做一些专题页,或者功能相对简单的项目来说也是完全能应付的,但整体来说感觉还是一种缩放,说不上是真正的适配,言外之意就是即将分享真正 ...

  2. H5常用代码：适配方案2

    前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在,在许多场合不尽如人意,会在低版本安卓上出现,不缩放,手动缩放未禁止的问题. 于是出现了第二种适配方案,既然通过视口缩放可以兼容,那为什么不直接 ...

  3. H5常用代码：适配方案1

    在工作中接到H5项目,第一件想到的事就应该是屏幕适配问题,解决了屏幕适配,接下来的事才能真正开始.从此篇博客开始会连续记录下我经常用到的一些适配方案. 对于传统的PC项目,直接在移动端打开也都是会以视 ...

  4. web h5常用代码总结

    注意:本文原创,转载请说明出处 1.使图片和文字水平居中,给图片css样式:vertical-align: middle;vertical-align:middle的时候,是该元素的中心对齐周围元素的 ...

  5. H5常用代码：适配方案5

    此方案跟方案4是同一原理,也是通过REM实现的,能单独归类出一个方案,是因为它有一定的实用价值,当你遇到追求完美,追求到一像素的UI或者产品时,那此方案将解决你的困境. 方案5主要是用来解决一像素边框 ...

  6. H5常用代码：适配方案3

    在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有 ...

  7. 微信小程序H5预览页面框架（二维码不隐藏）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 微信小程序H5预览页面框架

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 推荐几个精致的web UI框架及常用前端UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

随机推荐

  1. 解决C# 转到定义时打开的是元数据文件而非源代码文件的问题

    原因:添加引用时 使用的是“浏览"选项卡,选择了项目生成的dll作为引用的内容. 解决:添加引用时 使用的是"项目"选项卡,选择了项目本身作为引用的内容.

  2. Linux 中write()函数的出错情况及处理

    write函数首先将进程需要发送的数据先放在进程缓冲区中,然后向socket的发送缓冲区进行拷贝,在此,可能出现这样情况,即当进程缓冲区中的数据量大于此时发送缓冲区中所能接受的数据量时,若此时处于阻塞 ...

  3. C#中dataGridView用法集

    SqlConnection conn = new SqlConnection('Server=(local);DataBase=test;User=sa;Pwd=sa'); SqlDataAdapte ...

  4. Unity3D手游开发日记(9) - 互动草的效果

    所谓互动草,就是角色跑动或者释放技能,能影响草的摆动方向和幅度. 前面的文章早已经实现了风吹草动的效果,迟迟没有在Unity上面做互动草,是因为以前我在端游项目做过一套太过于牛逼的方案.在CE3的互动 ...

  5. 咏南IOCP中间件支持海量并发方案（集群）

    咏南IOCP中间件支持海量并发方案(集群) 支持D7~XE10.1.1开发 支持负载均衡,自动故障转移 可以在不停机的状态下,根据负载情况灵活增加中间件机器 中间件使用IOCP通信,单中间件支持并发数 ...

  6. "2013":爱你不容易

    2013对我来说确实像年初时曾给自己定义的那样,真的是非常不平常的一年.依稀记得去年年终时,BOSS和我深聊了1多钟头,谈到职业规划.人生还有家庭的林林种种.春节在家时也仔细考虑过2013自己该如何规 ...

  7. Mysql导入数据库的方法

    mysql导入数据库的方法 | 浏览:41023 | 更新:2012-11-01 19:45 1 2 3 4 5 6 7 分步阅读 MySQL是一个中.小型关系型数据库管理系统,由瑞典MySQL AB ...

  8. 安装数据库出现错误vc_red.msi找不到

    用虚拟光驱安装数据的时候可能会出现,找不到vc_red.msi的问题,通过加载的虚拟光驱目录设置,可能 仍然后问题,比如程序停止运行. 解决方法是:解压iso文件,用解压后的文件安装.然后在解压文件夹 ...

  9. Browser增加下载路径选择功能

    SWE Browser中有xml/download_settings_preferences.xml, 但在代码中却没有调用,导致“设置”中没有”选择下载路径“功能. 在com.android.bro ...

  10. 对比DOM和jQuery完善度

    <input type="text" id="username" value="请输入你的用户名"> <script> ...