移动端web头标签

最新推荐文章于 2023-08-25 09:12:27 发布
最新推荐文章于 2023-08-25 09:12:27 发布
阅读量377 收藏
点赞数
分类专栏： NodeJS 文章标签： 操作系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbinfx/article/details/84700317
版权
  1. <!DOCTYPE html><!-- 使用 HTML5 doctype，不区分大小写 -->
  2. <htmllang="zh-cmn-Hans"><!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  3. <head>
  4. <!-- 声明文档使用的字符编码 -->
  5. <metacharset='utf-8'>
  6. <!-- 优先使用 IE 最新版本和 Chrome -->
  7. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
  8. <!-- 页面描述 -->
  9. <metaname="description"content="不超过150个字符"/>
  10. <!-- 页面关键词 -->
  11. <metaname="keywords"content=""/>
  12. <!-- 网页作者 -->
  13. <metaname="author"content="name, email@gmail.com"/>
  14. <!-- 搜索引擎抓取 -->
  15. <metaname="robots"content="index,follow"/>
  16. <!-- 为移动设备添加 viewport -->
  17. <metaname="viewport"content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  18. <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
  19.  
  20. <!-- iOS 设备 begin -->
  21. <metaname="apple-mobile-web-app-title"content="标题">
  22. <!-- 添加到主屏后的标题（iOS 6 新增） -->
  23. <metaname="apple-mobile-web-app-capable"content="yes"/>
  24. <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
  25.  
  26. <metaname="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  27. <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  28. <metaname="apple-mobile-web-app-status-bar-style"content="black"/>
  29. <!-- 设置苹果工具栏颜色 -->
  30. <metaname="format-detection"content="telphone=no, email=no"/>
  31. <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  32. <!-- 启用360浏览器的极速模式(webkit) -->
  33. <metaname="renderer"content="webkit">
  34. <!-- 避免IE使用兼容模式 -->
  35. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  36. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  37. <metaname="HandheldFriendly"content="true">
  38. <!-- 微软的老式浏览器 -->
  39. <metaname="MobileOptimized"content="320">
  40. <!-- uc强制竖屏 -->
  41. <metaname="screen-orientation"content="portrait">
  42. <!-- QQ强制竖屏 -->
  43. <metaname="x5-orientation"content="portrait">
  44. <!-- UC强制全屏 -->
  45. <metaname="full-screen"content="yes">
  46. <!-- QQ强制全屏 -->
  47. <metaname="x5-fullscreen"content="true">
  48. <!-- UC应用模式 -->
  49. <metaname="browsermode"content="application">
  50. <!-- QQ应用模式 -->
  51. <metaname="x5-page-mode"content="app">
  52. <!-- windows phone 点击无高光 -->
  53. <metaname="msapplication-tap-highlight"content="no">
  54. <!-- iOS 图标 begin -->
  55. <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>
  56. <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
  57. <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>
  58. <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
  59. <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>
  60. <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
  61. <!-- iOS 图标 end -->
  62.  
  63. <!-- iOS 启动画面 begin -->
  64. <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>
  65. <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
  66. <linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>
  67. <!-- iPad 竖屏 1536x2008（Retina） -->
  68. <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>
  69. <!-- iPad 横屏 1024x748（标准分辨率） -->
  70. <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>
  71. <!-- iPad 横屏 2048x1496（Retina） -->
  72.  
  73. <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>
  74. <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
  75. <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>
  76. <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
  77. <linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/>
  78. <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
  79. <!-- iOS 启动画面 end -->
  80.  
  81. <!-- iOS 设备 end -->
  82. <metaname="msapplication-TileColor"content="#000"/>
  83. <!-- Windows 8 磁贴颜色 -->
  84. <metaname="msapplication-TileImage"content="icon.png"/>
  85. <!-- Windows 8 磁贴图标 -->
  86.  
  87. <linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/>
  88. <!-- 添加 RSS 订阅 -->
  89. <linkrel="shortcut icon"type="image/ico"href="/favicon.ico"/>
  90. <!-- 添加 favicon icon -->
  91.  
  92. <title>标题</title>
  93. </head>
YB程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端的meta视口标签书写
LHarashi的博客
04-21 450
移动端的mete视口标签 <meta name="viewport"" content="width=device -width,user- scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 其中 width:宽度设置的是viewport宽度，可以设置device -width特殊值； user-scalable:用户是否可以缩放，yes或者no（1或0）； initial-scale:初始缩放比，大于
移动端开发中的meta viewport常用写法
qq_34580930的博客
06-29 803
1. 设计宽度等于屏幕宽度，初始化缩放比例为1：1，最大缩放为1，禁止用户缩放&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;2.在苹果手机中，设置页面中的数字仅作展示，不能当作电话号码去点击直接拨打 &lt;meta name=...
移动端head里面的mate设置
sinat_38992528的博客
05-14 2061
项目中用到的： <head> <meta charset="utf-8">//编码 <meta name="applicable-device" content="mobile" />//屏幕适配，只适合在手机浏览 <title>第一手游网_手机游戏下载_好玩的手机网游_最新手机游戏排行榜</title>//标题 <meta...
移动端meta标签
yushuangyushuang的博客
01-27 1577
移动端meta标签 移动端meta标签的作用，内容，content有几种类型的值 meta charset="UTF-8"> meta http-equiv="content-type" content="text/html"> meta name="keywords" content=""/> meta name="description" cont
移动端web开发进阶
01-30
基于“入门”一文，我想再补充几个基础知识点，主要都是针对iOS的meta标签：⑴允许全屏浏览页面的标签：⑵safari顶端状态栏样式定义/隐藏：⑶ios会把类似电话号码的数字变为可点击并添加到电话的连接，我们可以这样...
移动端web学习笔记.doc
07-23
在移动端Web开发中，了解和掌握相关技术和最佳实践至关重要。以下是一份详细的移动端Web学习笔记，涵盖了标题和描述中提到的几个关键知识点。 首先，移动端标准设置涉及到HTML的`<meta>`标签，尤其是`viewport`属性...
移动端web总结笔记1
08-08
移动端 Web 开发总结笔记 移动端 Web 开发是一个复杂的过程，涉及到多个方面的技术，包括 HTML、CSS、JavaScript、网络协议等。本笔记总结了移动端 Web 开发的一些重要知识点，包括头部定义、触摸事件、页面跳转、...
移动端web开发H5之音视频
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api,可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以在移动设备上完美兼容啦。
html 移动端的各种meta标签
Ice Yang的博客
06-29 1339
&lt;!-- 强制竖屏 --&gt; &lt;meta name="x5-orientation" content="portrait"&gt; &lt;meta name="screen-orientation" content="portrait"&gt; &lt;meta name="apple-mobile-web-app-status-bar-sty
移动端meta整合
qq_25330441的博客
07-28 583
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 viewport模板——通
HTML5的文档结构,meta标签常用属性
m0_60935443的博客
05-08 1276
HTML5的文档结构,meta标签常用属性，name='viewport'解释
移动前端不得不了解的html5 head 头标签
最新发布
delishcomcn的博客
08-25 346
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
HTML之meta标签属性知识点总结
yunduanaoligei的博客
11-18 487
序言 今天分享下”HTML之meta标签属性知识点总结“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。meta是html语言表达head区的一个辅助标签。或许你认为这种编码无关紧要。实际上假如你能用好meta标签，会让你产生出乎意料的实际效果，meta标签的的作用有：百度搜索引擎提升（SEO），界定页面应用语言表达，自动更新并偏向新的页面，完成网页变换时的动画特效，操纵页面缓存，网页评定点评，操纵网页表明的对话框等！
HTML的meta,移动端IOS,几种解决方案
weixin_33979363的博客
11-17 494
为什么80%的码农都做不了架构师？>>> ...
meta标签详解
fly0279的博客
07-18 653
html中meta标签的详解 meta标签是什么1 META标签是HTML语言HEAD区的一个辅助性标签 meta标签是干什么用的？ META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见，但却是文档的最基本的元数据. 元数据又是什么东西？ 元数据(Metadata)是用来概括描述数
很实用的html meta标签实现页面跳转
yuzhuoweb的博客
09-15 1万+
就算你是有很多年开发经验的web开发工程师，有着很多web开发经验，对于先进的web开发技术有着很深刻的研究，然而你却忽略了那些最最基础的东西!现在我来问你，你是否对html所有的标签都能熟练的使用呢？是否能恰当的使用每个html标签以达到最优化的效果呢？下面崔世瑞来教你一个被很多资深web开发工程师所忽略的知识点，如何用html的方式实现页面跳转：  refresh用于刷新与跳转(重定向)
移动端声明及meta标签设置
热门推荐
Li_blog的博客
08-04 3万+
移动端meta标签设置1.设置当前html文件的字符编码<meta charset="UTF-8">2设置浏览器的兼容模式（让IE使用最新的浏览器渲染）<meta http-equiv="X-UA-Compatible" content="IE=edge"/>3.视口（快捷键：meta:vp）<meta name="viewport" content="maximum-scale=1.0,minim
移动端meta设置大全
bug_zero的博客
01-14 4536
声明文档使用的字符编码:      优先使用 IE 最新版本和 Chrome:      页面描述:      页面关键词:      网页作者：      搜索引擎抓取：      为移动设备添加 viewport iOS 设备 添加到主屏后的标题（iOS 6 新增）：      是否启用 WebApp 全屏模式，删除苹果
移动端Web开发最佳实践指南
“移动端web开发最佳实践是一篇关于移动端Web开发的文章，主要涵盖了移动Web开发的最佳实践，包括响应式设计、平台选择、媒体查询、文字排版、流体布局、图片加载、DOM操作性能优化和触屏事件等方面。这篇文章对初学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值