Mobile开发之meta篇
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
height: viewport 的高度 (范围从 223 到 10,000 )
initial-scale: 初始的缩放比例 (范围从>0到 10 )
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放
- <meta name="apple-mobile-web-app-capable" content="yes" />
是否删除默认的苹果工具栏和菜单栏
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
当设置了app形式之后,作用是控制状态栏显示样式,但是本机ios7测试之后没啥改变……不解
- <meta name="format-detection"content="telephone=no, email=no" />
iphone会把一串数字识别为电话号码,点击的时候会提示是否呼叫,屏蔽这功能则把telephone设置为no,
要启用电话功能,请使用<a href="tel:13888888888">Call Me : 13888888888</a>来代替,
邮件则为<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
- 其他的meta设置
<!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">
此外,apple还有两个有趣的标签:
1. apple-touch-icon
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
如果apple-mobile-web-app-capable
设置为yes
了,那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。而设置相应apple-touch-icon
标签,则添加到主屏上的图标就会使用我们指定的图片。
2. apple-touch-startup-image
<link rel="apple-touch-startup-image" href="/startup.png">
基于apple-mobile-web-app-capable
设置为yes
,可以为WebApp设置一个类似NativeApp的启动画面。和apple-touch-icon
不同,apple-mobile-web-app-capable
不支持sizes属性,要使用media来加载不同的启动画面。详细查询大漠的文章。
// iPhone <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> // iPhone Retina <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
所以,对于移动端,把通用的起始模板写成sublime的snippet:
<snippet> <content><![CDATA[ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <title>${1}</title> </head> <body> ${2} </body> </html> ]]></content> <tabTrigger>mhd</tabTrigger> <description>Mobile Frame</description> <scope>text.html</scope> </snippet>
参考:
http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html
http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html
相关推荐
本篇文章将深入探讨如何将WebView与jQuery Mobile整合,以便为用户提供更丰富的交互体验。jQuery Mobile是一个轻量级、触控优化的前端框架,用于构建响应式移动Web应用程序。 首先,我们需要在Android项目中引入...
在本篇文章中,我们将深入探讨 jQuery Mobile 的核心概念、主要特点以及如何在项目中应用。 ### 1. 核心概念 - **事件驱动**:jQuery Mobile 基于 jQuery 事件模型,通过监听页面和元素的特定事件来响应用户的交互...
在本篇文章中,我们将深入探讨 jQuery Mobile 的核心概念、主要特性以及如何在项目中使用这些资源文件。 ### 1. 核心概念 - **页面结构**:jQuery Mobile 使用“页面”和“页片”(page and page fragments)的...
本篇将深入探讨如何利用jQuery Mobile库来创建一个动态、有趣的数字随机抽奖页面。jQuery Mobile是一个强大的前端框架,它基于jQuery库,专为移动设备设计,提供了丰富的组件和优化的触摸事件处理,使得在移动设备上...
尽管提供的部分内容与jQuery Mobile无关,主要提及了Linux公社网站及其对Linux系统的报道,但本篇内容将围绕jQuery Mobile展开,提供详尽的知识点。 ### jQuery Mobile简介 jQuery Mobile是一款用于创建适应不同...
在本篇文章中,我们将深入探讨 jQuery Mobile 的基本概念、主要功能以及如何开始使用它。 ### 一、jQuery Mobile 的特点 1. **响应式设计**:jQuery Mobile 使用 CSS3 的媒体查询来适应不同尺寸的屏幕,确保在手机...
在前端开发中,HTML5(H5)的`<meta>`标签起着至关重要的作用,它可以帮助优化网页在不同设备上的展示效果,特别是在移动设备上。以下是对这些`meta`标签的详细解释: 1. **视口元标签 (`<meta name="viewport">`)*...
本篇将深入探讨WAP 2.0的开发规范,包括页面规范、标签使用以及一些基础的开发常识。 1. **XHTML MP (Mobile Profile) 标准** WAP 2.0基于XHTML MP,这是专门为移动设备定制的XHTML版本。它简化了HTML语法,去除了...
本篇文章将深入探讨如何创建一个简单的 jQuery Mobile 应用,以及在实际开发中的基本使用方法。 首先,让我们理解 jQuery Mobile 的核心概念。jQuery Mobile 基于页面架构,而不是传统的单一页面应用。这意味着,...
在移动Web开发中,jQuery Mobile是一个强大的框架,它提供了丰富的UI组件和触摸优化的功能,使得创建响应式和交互式的移动应用变得简单。本篇文章将深入讲解如何在jQuery Mobile中处理外部链接的切换,以及通过示例...
本篇文章将深入探讨jQuery日期控件,特别是针对jQuery Mobile的日期控件。 ### 1. jQuery与jQuery Mobile jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery Mobile...
最后,<meta name="apple-mobile-web-app-title">和<meta name="apple-mobile-web-app-capable" content="yes">等标签是针对苹果设备的特定设置。前者用于定义在iOS设备上启动网页应用时显示的标题,而后者则用于...
在Web开发中,媒体查询(Media Queries)是响应式网页设计的关键技术,它允许我们根据设备的特定特性,如视口宽度、设备像素比等,来应用不同的CSS样式。本篇将通过一个简单的例子,探讨如何使用媒体查询实现对不同...
在本篇文章中,我们将详细介绍如何通过XML配置文件来实现对Struts2框架中的Action类的所有方法进行输入数据的校验。这种方法不仅提高了代码的可维护性,还简化了校验逻辑的编写过程。下面将分步骤讲解整个实现过程。...
这篇文档主要介绍了各种在不同操作系统和地域品牌手机上常见的文件格式,包括Symbian、Java、RAR/ZIP、Android以及Windows Mobile等平台的软件安装包。 1. **Symbian系统文件格式**: - `.sis` 和 `.sisx` 是...
本篇文章将详细介绍如何在Django项目中实现用户注册的实例步骤,涉及创建应用、自定义用户模型以及数据库迁移等关键知识点。 ### 创建应用和子应用 首先,Django项目由多个应用组成,每个应用可以独立完成特定的...
这篇文章将深入探讨如何通过JavaScript来获取这些关键信息。 首先,我们可以通过`navigator`对象来获取浏览器的基本信息。`navigator`对象是浏览器提供的一种全局对象,包含了关于用户浏览器的各种信息。我们可以...
在网页开发中,页面跳转是一个常见的需求,用于在用户完成某个操作或访问特定页面后转向其他页面。通常,我们使用JavaScript的`window.location.href`属性来实现这一功能,但有时候,由于各种原因(比如禁用...