快捷搜索:

html5手机网站需要加的那些meta/link标签,html5 me

一、大年夜众机型常用meta标签name的设置

1、name之viewport

阐明:屏幕的缩放

content的几个属性:

width viewport的宽度[device-width | pixel_value]width假如直接设置pixel_value数值,大年夜部分的安卓手机不支持,然则ios支持;

height – viewport 的高度 (范围从 223 到 10,000 )

user-scalable [yes | no]是否容许缩放

initial-scale [数值] 初始化比例(范围从 > 0 到 10)

minimum-scale [数值] 容许缩放的最小比例

maximum-scale [数值] 容许缩放的最大年夜比例

target-densitydpi 值有以下(一样平常保举设置中等响度密度或者低像素密度,后者设置详细的值dpi_value,别的webkit内核已不准备再支持此属性)

-- dpi_value 一样平常是70-400//没英寸像素点的个数

-- device-dpi设备默认像素密度

-- high-dpi 高像素密度

-- medium-dpi 中等像素密度

-- low-dpi 低像素密度

完备案例:

2、name之format-detection轻忽电话号码和邮箱

阐明:轻忽页面中的数字辨觉得电话号码

阐明:轻忽页面中的邮箱款式为邮箱

也可以写成:

3、name之设置作者姓名及联系要领

阐明:设置作者姓名及联系要领

4、其他

二、ios系统的meta/link设置:

1、开启对web app法度榜样的支持

阐明:网站开启对web app法度榜样的支持,着实意思便是删除默认的苹果对象栏和菜单栏,开启全屏显示

2、 改变顶部状态条的颜色;

阐明:

在 web app 利用下状态条(屏幕顶部条)的颜色;

默认值为 default(白色),可以定为 black(玄色)和 black-translucent(灰色半透明);

3、设置“添加到主屏幕图标

Safari 浏览器有一个“添加到主屏幕”的功能,用户可以像保存书签一样把一个网站添加到主屏幕,下次用户直接点击主屏幕上的图标就能进入网站。

这个功能不仅方便用户快速造访我们的网站,而且也使我们的 WebApp 更像一个原生利用。

由于 iOS 分辨率,以是 icon.png 图片的尺寸也各不相同,我们可以经由过程sizes属性来分手定义,iOS 系统会自动获取向匹配的图片:

扩展:

为用户加上提示

经由过程添加一个JavaScript代码来约请用户添加到主屏幕,该库应用了HTML5的本地存储跟踪是否已经显示过了,以避免重复呈现。

今朝应用对照多和有在更新的一个库来自这里:http://cubiq.org/add-to-home-screen

4、设置桌面图标的标题

为了在主屏达到最好的显示效果,title最好限定在六其中文长度内,超长的内容会被暗藏:

添加到主屏后的标题(iOS 6 新增)

5、设置启动画面

当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置环境下系统会默认显示该网站的首页截图,当然这个体验不是很好,以是我们必要经由过程以下代码来自定义启动画面:

根据 iOS 设备的分辨率,其启动画面的图片尺寸也各不相同以是:

或者以下代码,详细没有实践,还需考证

6、 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

==================

对照常用的meta

以下代码参考网址:view-source:三个w点adinnet点cn斜杠service斜杠3d点html

或者说

收拾====

meta属性在HTML中盘踞了很紧张的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有应用meta,然则作为正规军,我们照样有需要懂得一些meta的属性,并且能够纯熟应用它们。

1、声明文档应用的字符编码

2、声明文档的兼容模式

唆使IE以今朝可用的最高模式显示内容

唆使IE应用指令确定若何出现内容。标准模式指令以IE7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。

3、SEO 优化

页面描述

页面关键词

定义网页作者

定义网页搜索引擎索引要领,robotterms是一组应用英文逗号「,」瓜分的值,平日有如下几种取值:none,noindex,nofollow,all,index和follow。

4、为移动设备添加 viewport

content 参数解释:

width     viewport 宽度(数值/device-width)

heightviewport 高度(数值/device-height)

initial-scale初始缩放比例

maximum-scale最大年夜缩放比例

minimum-scale最小缩放比例

user-scalable是否容许用户缩放(yes/no)

minimal-uiiOS 7.1 beta 2 中新增属性,可以在页面加载时最小化高低状态栏。这是一个布尔值,可以直接这样写:

meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

5、iOS 设备

添加到主屏后的标题(iOS 6 新增)

是否启用 WebApp 全屏模式

设置状态栏的背景颜色

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数:

default 默认值。

black 状态栏背景是玄色。

black-translucent 状态栏背景是玄色半透明。

设置为 default 或 black ,网页内容从状态栏底部开始。

设置为 black-translucent ,网页内容充溢全部屏幕,顶部会被状态栏遮挡。

6、iOS 图标 rel 参数

apple-touch-icon 图片自动处置惩罚成圆角和高光等效果。

apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。

iPhone 和 iTouch,默认 57x57 像素,必须有

iPad,72x72 像素,可以没有,但保举有

Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但保举有

Retina iPad,144x144 像素,可以没有,保举大年夜家应用

title最好限定在六其中文长度内,超长的内容会被暗藏,添加到主屏后的标题(iOS 6 新增)

7、iOS 启动画面

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004(标准分辨率)

iPad 竖屏 1536x2008(Retina)

iPad 横屏 1024x748(标准分辨率)

iPad 横屏 2048x1496(Retina)

iPhone 和 iPod touch 的启动画面是包孕状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

iPhone/iPod Touch 竖屏 640x960 (Retina)

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置环境下系统会默认显示该网站的首页截图,当然这个体验不是很好

8、Windows 8

Windows 8 磁贴颜色

Windows 8 磁贴图标

9、不常用的

添加 RSS 订阅

添加 favicon icon

禁止数字识自动别为电话号码

不让android识别邮箱

启用360浏览器的极速模式(webkit)

避免IE应用兼容模式

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

微软的老式浏览器

QQ强制竖屏

UC强制全屏

QQ强制全屏

UC利用模式

QQ利用模式

禁止百度转码

windows phone 点击无高光

关键字

描述

标题

作者

公司

让IE浏览器用最高档内核衬着页面 还有用 Chrome 框架的页面用webkit 内核

IOS6全屏

Chrome高版本全屏

让360双审浏览器用webkit内核衬着页面

添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

10、sns 社交标签

参考微博API

您可能还会对下面的文章感兴趣: