手机移动端网页的头部标签和 meta该怎么写比较好?

    类别:建站经验  贡献者:admin  总点击:4160  受欢迎度:-5  更新日期:2015年11月27日
简介:手机移动端网页的头部标签和 meta该怎么写比较好?移动端meta标签同样包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。.
  • 手机移动端网页的头部标签和 meta该怎么写比较好?

    做网页(zuowangye.com)编者注:替换以下《》,即可放入网页正常使用。meta标签对移动端网页同样有很大的作用,那么该如何写比较好呢?

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?

    meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。

    http-equiv:

    该枚举的属性定义,可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。


    使用 HTML5 doctype,不区分大小写

    《!DOCTYPE html》

    --------------------------------------------------------------------------------

    更加标准的 lang 属性写法 

    《html lang="zh-cmn-Hans"》

    meta声明文档使用的字符编码

    《meta charset='utf-8'》

    --------------------------------------------------------------------------------

    优先使用 IE 最新版本和 Chrome

    《meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/》

    --------------------------------------------------------------------------------

    页面描述

    《meta name="description" content="不超过150个字符"/》

    --------------------------------------------------------------------------------

    页面关键词

    《meta name="keywords" content=""/》

    --------------------------------------------------------------------------------

    网页作者

    《meta name="author" content="name, [email protected]"/

    --------------------------------------------------------------------------------

    搜索引擎抓取

    《meta name="robots" content="index,follow"/》

    --------------------------------------------------------------------------------

    为移动设备添加 viewport

    说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?

    viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?

    《meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"》

    width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。 http://www.zuowangye.com

    iOS 设备

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

    《meta name="apple-mobile-web-app-title" content="标题"》

    --------------------------------------------------------------------------------

    是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏

    《meta name="apple-mobile-web-app-capable" content="yes"/》

    --------------------------------------------------------------------------------

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

    《meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"》      

    --------------------------------------------------------------------------------

    设置苹果工具栏颜色

    《meta name="apple-mobile-web-app-status-bar-style" content="black"/》

    --------------------------------------------------------------------------------

    忽略页面中的数字识别为电话,忽略email识别

    《meta name="format-detection" content="telphone=no, email=no"/》

    --------------------------------------------------------------------------------

    启用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应用模式

    --------------------------------------------------------------------------------

    windows phone 点击无高光

    《meta name="msapplication-tap-highlight" content="no"》

    --------------------------------------------------------------------------------

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

    《link rel="apple-touch-icon-precomposed" href="http://wap.b2b6.com/apple-touch-icon-57x57.png"/

    --------------------------------------------------------------------------------

    Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

    《link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/》

    --------------------------------------------------------------------------------

    Retina iPad,144x144 像素,可以没有,但推荐有

    《link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/》
    iOS 启动画面
    iPad 竖屏 768 x 1004(标准分辨率)

    《link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/》

    --------------------------------------------------------------------------------

    iPad 竖屏 1536x2008(Retina)

    《link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/》

    --------------------------------------------------------------------------------

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

    《link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/》

    --------------------------------------------------------------------------------

    iPad 横屏 2048x1496(Retina)

    《link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/》

    --------------------------------------------------------------------------------

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

    《link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/》

    --------------------------------------------------------------------------------

    iPhone/iPod Touch 竖屏 640x960 (Retina)

    《link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/》

    --------------------------------------------------------------------------------

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

    《link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/》

    iOS 设备 end
    Windows 8 磁贴颜色

     《meta name="msapplication-TileColor" content="#000"/》

    --------------------------------------------------------------------------------

    Windows 8 磁贴图标

    《meta name="msapplication-TileImage" content="icon.png"/》

    --------------------------------------------------------------------------------

    添加 RSS 订阅

    《link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/》

    --------------------------------------------------------------------------------

    添加 favicon icon

    《link rel="shortcut icon" type="image/ico" href="/favicon.ico"/》

    --------------------------------------------------------------------------------

    标题

    《title》标题《/title》
    做网页(zuowangye.com)

    补充本知识点暨快乐评论此文章:'手机移动端网页的头部标签和 meta该怎么写比较好?.'

踩下去23
顶上来8
复制本页网址,与你QQ/MSN上的好友分享  温馨提示:如果您喜欢本站,请把她推荐给您的朋友们!
现在有0人对本文发表评论。  »马上发布评论
现在有0人对本文发表评论。  »查看所有评论
您的姓名: * 可选项,留空即为匿名发表
评论内容:
剩余字数:  * 按 Ctrl + Enter 直接发送.
           »»我要分享做网页知识
相关文章推荐
网友阅读排行
建站经验
本站会员贡献
合作伙伴: 百度站长平台 新浪读书频道 CSDN.Net YPState R灯具集 小金子学院 商录 全球网站推广库 搜狗站长平台 网页百科 更多» >>加入本站作者团
首页 | 关于我们 | 网站地图 | 合作伙伴 | 部分作者 | 会员注册 友情链接 | 联系方式 |
2004-2020 做网页学习网 鄂公网安备 42010402000280号 鄂ICP备13003030号