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

news/2024/5/13 13:03:21/文章来源:https://blog.csdn.net/petter7226/article/details/46119855

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

1、name之viewport

<meta name="viewport" content="">
说明:屏幕的缩放


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 低像素密度


完整案例:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">  

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

<meta name="format-detection" content="telephone=no">
说明:忽略页面中的数字识别为电话号码
<meta name="format-detection" content="email=no"/>

说明:忽略页面中的邮箱格式为邮箱

也可以写成:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <meta name="format-detection" content="telphone=no, email=no"/>  

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

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

<meta name="author" contect="name, xxx@163.com" />


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">


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

1、开启对web app程序的支持

<meta name="apple-mobile-web-app-capable" content="yes">
说明:
    网站开启对web app程序的支持,其实意思就是删除默认的苹果工具栏和菜单栏,开启全屏显示

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

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
    在 web app 应用下状态条(屏幕顶部条)的颜色;
    默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);



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

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

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

因为 iOS 分辨率,所以 icon.png 图片的尺寸也各不相同,我们可以通过sizes属性来分别定义,iOS 系统会自动获取向匹配的图片:

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:14px;"><!-- iOS 图标 begin -->  
  2.         <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>  
  3.         <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->  
  4.         <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>  
  5.         <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->  
  6.         <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>  
  7.         <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->  
  8. <!-- iOS 图标 end --></span>  


扩展:

为用户加上提示

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

目前使用比较多和有在更新的一个库来自这里:http://cubiq.org/add-to-home-screen


4、设置桌面图标的标题,

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

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

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:14px;"><meta name="apple-mobile-web-app-title" content="标题"></span>  

5、设置启动画面

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

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <link rel="apple-touch-startup-image" href="Startup.png" />  

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

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!-- iOS 启动画面 begin -->  
  2.         <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>  
  3.         <!-- iPad 竖屏 768 x 1004(标准分辨率) -->  
  4.         <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>  
  5.         <!-- iPad 竖屏 1536x2008(Retina) -->  
  6.         <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>  
  7.         <!-- iPad 横屏 1024x748(标准分辨率) -->  
  8.         <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>  
  9.         <!-- iPad 横屏 2048x1496(Retina) -->  
  10.        
  11.         <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>  
  12.         <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->  
  13.         <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>  
  14.         <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->  
  15.         <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>  
  16.         <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->  
  17.     <!-- iOS 启动画面 end -->  
或者以下代码,具体没有实践,还需考证
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!!-- iPhone SPLASHSCREEN-->  
  2. <!link href="http://wlog.cn/html/"apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />  
  3. <!!-- iPhone (Retina) SPLASHSCREEN-->  
  4. <!link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />  
  5. <!!-- iPad (portrait) SPLASHSCREEN-->  
  6. <!link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />  
  7. <!!-- iPad (landscape) SPLASHSCREEN-->  
  8. <!link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />  
  9. <!!-- iPad (Retina, portrait) SPLASHSCREEN-->  
  10. <!link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />  
  11. <!!-- iPad (Retina, landscape) SPLASHSCREEN-->  
  12. <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />  

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

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">  



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

比较常用的meta

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

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!--[if lt IE 7 ]><html class="oldie ie ie6"> <![endif]-->  
  2. <!--[if IE 7 ]><html class="oldie ie ie7"> <![endif]-->  
  3. <!--[if IE 8 ]><html class="ie ie8"> <![endif]-->  
  4. <!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->  
  5. <head>   
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7. <title></title>  
  8. <meta name="keywords" content="" />  
  9. <meta name="description" content="" />  
  10. <meta name="title" content="" />  
  11. <meta name="author" content="-06" />  
  12. <meta name="Copyright" content="" />  
  13. <!-- 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核  
  14. ================================================== -->  
  15. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  16. <!-- IOS6全屏 Chrome高版本全屏  
  17. ================================================== -->  
  18. <meta name="apple-mobile-web-app-capable" content="yes">  
  19. <meta name="mobile-web-app-capable" content="yes">   
  20. <!-- 让360双核浏览器用webkit内核渲染页面  
  21. ================================================== -->  
  22. <meta name="renderer" content="webkit">  
  23. <!-- Mobile Specific Metas  
  24. ================================================== -->  
  25. <!-- !!!注意 minimal-ui 是IOS7.1的新属性,最小化浏览器UI -->  
  26. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">  
  27. <meta name="format-detection" content="telephone=no">  
  28. <!-- CSS  
  29. ================================================== -->  
  30.     <link href="/css/reset.css" rel="stylesheet" type="text/css">  
  31. <link href="/css/magicwall.css" rel="stylesheet" type="text/css">  
  32. <link  href="/css/jquery.gridster.css" rel="stylesheet" type="text/css">  
  33. <link href="/css/case.css" rel="stylesheet" type="text/css">  
  34. <link href="/css/case_1280.css" rel="stylesheet" type="text/css">  
  35. <link href="/css/case_1024.css" rel="stylesheet" type="text/css">  
  36. <link href="/css/case_640.css" rel="stylesheet" type="text/css">  
  37. <link href="/css/case_320.css" rel="stylesheet" type="text/css">  
  38. <link href="/css/style_retina.css" rel="stylesheet" type="text/css">  
  39.   
  40.   
  41. <!--[if lt IE 9]>  
  42.         <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>  
  43. <![endif]-->  
  44.   
  45.   
  46. <!-- Favicons  
  47. ================================================== -->  
  48. <link rel="shortcut icon" href="favicon.ico" >  
  49. <!-- Android 主屏图标  
  50. ================================================== -->    
  51. <link rel="icon" sizes="196x196" href="/images/apple-touch-icon-152x152.png">  
  52. <!-- IOS 主屏图标  
  53. ================================================== -->  
  54. <link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-76x76.png">  
  55. <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/images/apple-touch-icon-76x76.png">  
  56. <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/images/apple-touch-icon-120x120.png">  
  57. <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/apple-touch-icon-152x152.png">  
  58.   
  59. <link rel="apple-touch-startup-image" href="/startup-748x1024.jpg"   
  60. media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" >  
  61. <link rel="apple-touch-startup-image" href="/startup-768x1004.jpg"   
  62. media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" >  
或者说
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!-- 启用360浏览器的极速模式(webkit) -->  
  2. <meta name="renderer" content="webkit">  
  3. <!-- 避免IE使用兼容模式 -->  
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  5. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->  
  6. <meta name="HandheldFriendly" content="true">  
  7. <!-- 微软的老式浏览器 -->  
  8. <meta name="MobileOptimized" content="320">  
  9. <!-- uc强制竖屏 -->  
  10. <meta name="screen-orientation" content="portrait">  
  11. <!-- QQ强制竖屏 -->  
  12. <meta name="x5-orientation" content="portrait">  
  13. <!-- UC强制全屏 -->  
  14. <meta name="full-screen" content="yes">  
  15. <!-- QQ强制全屏 -->  
  16. <meta name="x5-fullscreen" content="true">  
  17. <!-- UC应用模式 -->  
  18. <meta name="browsermode" content="application">  
  19. <!-- QQ应用模式 -->  
  20. <meta name="x5-page-mode" content="app">  
  21. <!-- windows phone 点击无高光 -->  
  22. <meta name="msapplication-tap-highlight" content="no"> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_812613.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我国十大盗版网站:百度占前三

日前&#xff0c;国务院发展研究中心所属中国企业评价协会在北京召开新闻发布会&#xff0c;发布了《知识产权白皮书出版业》。“白皮书”中称&#xff0c;目前我国网络数字化盗版严重&#xff0c;搜索引擎成为盗版内容的重要出口&#xff0c;其中百度、百度贴吧和百度文库成为…

8 个接私活的网站

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群2019互联网圈不好混&#xff0c;不是每个公司都能像腾讯云每人一部iPhone 11&#xff0c;不少公司今年已经没了年终奖&#xff0c;不要抱怨&#xff0c;因为有的小伙伴估计工作都没了。师长今天给大家推荐…

linq版本E-Commerce网站示例

在家把E-Commerce的代码换成了linq版本的,代码量少了很多,看来做的工作越来越少,程序员的工资又要跌了...代码不保证全部正确,只用于学习,需要的可以看看,运行环境当然是.net3.5了...值得注意的是,当表关系不存在一对一或多对多的时候,你还是需要手动创建实体.如购物车和产品两…

精选了国内外 6 个接私活的网站,供大家赚钱!

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群本文来自公众号&#xff1a;GitHubDaily整理&#xff1a;起笔文章会向大家推荐国内外几个接外包比较靠谱的平台&#xff0c;主旨是贵精不贵多。因此&#xff0c;像「猪x戒」这种会让程序员自贬身价&#…

FineUI asp.net Web应用网站实例Demo

这是一个WEB应用平台的DEMO示例&#xff0c;基于C#的asp.net环境&#xff0c;选用FineUI为前端&#xff0c; 对后端SQLserver数据库的操控是使用微软的EntityFrameWork框架和面向对象的LINQ语法&#xff0c; 我使用这个平台组合已经有一段时间了&#xff0c;它经历了2次小的项…

做一个战役地图动态展示的网站

2019年末&#xff0c;无意间发现了一本2013年的架空历史军事穿越小说《晚明》&#xff0c;作者 柯山梦 。 故事背景发生在天启七年&#xff08;1627&#xff09;元月&#xff0c;走过259年的明王朝内忧外患&#xff0c;大乱将起。就在此时&#xff0c;一个脸皮极厚的办公室主任…

SAP APO 帮助的网站

https://help.sap.com/viewer/c95f1f0dcd9549628efa8d7d653da63e/7.0.4/en-US/cb09c4530b29b44ce10000000a174cb4.html

树莓派 + lnmp一键安装包 + thinkphp搭建网站

目录 前言&#xff1a; 一.准备树莓派 二.安装lnmp安装包 三.设置虚拟主机 1.添加虚拟主机​ 2.上传Thinkphp框架 3.进行一些配置&#xff08;重要&#xff09; 前言&#xff1a; 之前零星写了一些环境搭建的问题的解决方法&#xff0c;现在总结一下&#xff0c;把步骤…

中国万网官方网站被黑 黑客留言调侃

11月20日消息&#xff0c;有网友在a5论坛发帖反映&#xff0c;万网官方网站页面被黑&#xff0c;黑客在被黑页面上写出了 “吃饱没事做 做饱没事吃 中国鹰派有万涛 万涛黑站有绝招 打开机房推开门 拿起锤头往上敲 BY AK "等字样。 用户发帖反映万网官方网站被黑页面 万网官…

如何让你的网站支持Gravatar

Gravatar是什么&#xff1f;点这里知道非WordPress网站代码 < ?php if ( !empty( $email变量) ) { $md5 md5( $email变量 ); $default urlencode( 默认图片地址 ); echo "<img stylefloat: right; margin-left: 10px; srchttp://www.gravatar.com/avatar.php?…

8 个适合程序员学习新技能的网站

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群程序员书库(ID:CodingBook)猿妹编译链接&#xff1a;https://medium.com/better-programming/7-great-websites-to-learn-new-tech-skills-c36f39de55b9最近&#xff0c;猿妹一直在和大家分享一些编程学习…

一款seo工具

一款小巧精致的seo工具——站长工具箱&#xff0c;可查询网站排名&#xff0c;以及google,baidu等搜索引擎的收录和反向链接情况。 下载地址&#xff1a;http://download.flashplayer.cn/webmaster-toolbox-20090824.rar转载于:https://www.cnblogs.com/webtrados/archive/2009…

25 个实用前端网站工具推荐

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群来自公众号:麻瓜编程作者:凉皮给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具&#xff0c;包括一些小游戏、教程、社区网站和博客&#xff0c;以及一些资源网站&#xff0c;希望可以帮助到大家…

css网站元素设计-列表元素的使用

1、列表形式由于展示形式整齐直观&#xff0c;在网站设计中占有很大的比重。早期的列表都是由表格实现的&#xff0c;在代码上过于繁杂&#xff0c;设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。看XHTML代码很简单&#xff1a;程序代码<ul>&l…

memcached在大负载高并发网站上的应用(转)

大家可能对memcached这种产品早有了解&#xff0c;或者已经应用在自己的网站中了&#xff0c;但是也有一些朋友从来都没有听说过或者使用过。这都没什么关系&#xff0c;本文旨在从各个角度综合的介绍这种产品&#xff0c;尽量深入浅出&#xff0c;如果能对您现在或以后的工作有…

2020 最好的 10 大学习编程网站!

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者&#xff1a;John Selawsky链接&#xff1a;https://sourl.cn/cWw63v前言在这篇文章中&#xff0c;我收集了 10 个最佳的编程学习网站&#xff0c;掌握编程技能可能是帮助你走出舒适区的一大步&#…

【转】12个优秀的网站测速服务 帮助你检查网站访问速度

网站打开速度是一个值得重视的问题&#xff0c;影响效率和心情。自从更换主题以来&#xff0c;不断对其进行优化&#xff0c;闲着没事也测试用各种服务进行网站访问加载速度测试。虽然很多开发工具都带有速度测试功能&#xff0c;但那毕竟只是本机测试嘛。因此&#xff0c;A.sh…

程序员平时都逛哪些网站?

code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群来源|cnblogs.com/three-fighter/p/13641835.html一、在线教程首先列出一些在线教程网站&#xff0c;这些在线教程网站通常都比较适合入门&#xff0c;可以作为开发学习路上的第一个阶梯&#xff0c;也可…

15 个使用 jQuery Masonry 进行布局的网站

jQuery Masonry 是一 个用来布局的jQuery插件&#xff0c;本文介绍 15 个使用 jQuery Masonry 制作的网站例子&#xff0c;很不错。 1. Cutest Paw 2. All Blues 3. Do Whatever It Takes 4. Pattern Tap 5. We And The Color 6. All in My Head 7. Dazed Digital 8. Photograp…

转载 - 10个基于jQuery实现的漂亮网站赏析

这10个基于jQuery实现的网站&#xff0c;不仅美观而且设计师也可以从中获得很好的灵感。 1. Google Tour 2. NIzo 3. Cultural Solutions 4. Kasteel Withof 5. Solo 6. Intellisult 7. Appear 8. Made By Water 9. Kurppahosk 10. Snowden 文章出自&#xff1a;open-open 转载…