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

原文链接:http://blog.csdn.net/kongjiea/article/details/17092413(收藏专用!如需转载,请点击链接,联系博主,获得同意后方可转载)

3、name之设置作者姓名及联系方式

说明:设置作者姓名及联系方式

<meta name="author" contect="name, [email protected]" />

4、其他

<!-- 声明文档使用的字符编码 -->
    <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="robots" content="index,follow"/>

<!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">

<!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 针对手持设备优化,主要是针对一些老的不识别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">

<!-- 添加 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"/>

<!-- sns 社交标签 begin -->
        <!-- 参考微博API -->
        <meta property="og:type" content="类型" />
        <meta property="og:url" content="URL地址" />
        <meta property="og:title" content="标题" />
        <meta property="og:image" content="图片" />
        <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->

<!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴图标 -->
    <meta name="msapplication-TileImage" content="icon.png"/>

<!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

时间: 2024-12-24 08:03:26

html5手机网站需要加的那些meta/link标签,html5 meta全解的相关文章

自己做的html5手机网站

这个网站采用html5+css3+jquerymobile 只开发了前台的功能,前台的界面比较美观,主要是本人还没有学会后台的语言,所以后台就还没有开发,到目前为止只开发了前台的功能,如果各位博友有兴趣可以下载下来自己继续开发,这个网站的界面有参考各个菜谱网站的页面的样式,但是又不一样,是属于完全独立开发的.代码链接如下: 乐道厨房代码 例图如下 自己做的html5手机网站

HTML5手机网站开发页面宽度解决方案

相信大家都知道,现在市面上手机的屏幕尺寸多种多样,2.8寸.3.0寸.3.2寸.3.5寸.4.0寸.4.2寸.4.5寸等等,随之而来的手机分辨率也千差万别,有240*320像素.320*480像素.480*800像素.640*960像素等等,其中480*800像素和640*960像素是主流的,但智能手机的发展速度大家有目共睹,随着手机的发展,不同尺寸的手机会陆续出现,这就给手机网站的开发带来非常大的麻烦,如何让自己的手机网站在不同尺寸的手机都能完美展示,手机网站的设计稿要设计成多大才合适? 只要

【转载&#183;收藏】 html5手机网站自适应需要加的meta标签

webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/> 下面是对于这个标签的具体说明: viewport 语法介绍: <meta name

[转] -- html5手机网站自适应需要加的meta标签

webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/> 下面是对于这个标签的具体说明: viewport 语法介绍: <meta name

JavaScript HTML5 手机网站 基本功能

让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>   1)html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />发确保网页的效果 2)加上以下语句可使网页在苹果设备上运行更好<meta name="apple-m

touchweb手机网站图片加载方法(canvas加载和延迟加载)

一.canvas图片加载 关于canvas加载,我的方法是,将文章中所有用到图片的地方,都用canvas代替,给canvas一个data-src,里面存放img的路径,通过canvas方法渲染图片.因为图片渲染需要时间,一般会给canvas一个背景,背景可以用gif图片.图片渲染好了之后把背景去掉. 我的canvas代码如下: canvasload: function () { //canvas加载图片 var imglength = $("#您的id").find("can

html5手机网站常用的9个CSS属性

1.圆角效果 “border-radius”是实现这一功能的一个重要的属性,可以用来直接定义HTML元素的圆角,并且被所有现代浏览器支持. Css代码 .border-radius:10px;/* CSS3 Property */ .-moz-border-radius:10px;/* Firefox */ .-webkit-border-radius:10px;/* Chrome/Safari */ .-khtml-border-radius:10px;/* Linux browsers */

HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于为什么觉得难.觉得无从下手. 段亮觉得有以下几点: 一.没有完整的思路和流程 就像做网站的流程一样,如果你能知道它的流程,我相信就不会觉得做手机网站难!真正难的是你没有思路. 二.把html5这门技术想的高深莫测 好像觉得学会用html5+css3做手机网站,就相当于学会了顶尖的绝世武功

HTML5页面资源预加载(Link prefetch)功能加速页面加载速度

页面资源预加载/预读取(Link prefetch)是什么?来自MDN的解释: 页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源.一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里.当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户. 简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面