`

移动端web头标签

 
阅读更多
  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>
分享到：
| Zepto 这个著名的 DOM
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    移动端web学习笔记.doc

    在移动端Web开发中，了解和掌握相关技术和最佳实践至关重要。以下是一份详细的移动端Web学习笔记，涵盖了标题和描述中提到的几个关键知识点。 首先，移动端标准设置涉及到HTML的`&lt;meta&gt;`标签，尤其是`viewport`属性...

    移动端web总结笔记1

    移动端 Web 开发总结笔记 移动端 Web 开发是一个复杂的过程，涉及到多个方面的技术，包括 HTML、CSS、JavaScript、网络协议等。本笔记总结了移动端 Web 开发的一些重要知识点，包括头部定义、触摸事件、页面跳转、...

    手机移动端web分类页面

    在移动互联网飞速发展的今天，手机移动端Web页面的开发已经成为前端开发者不可或缺的技能之一。本项目"手机移动端web分类页面"就是一个很好的实例，它利用了HTML5、CSS3和JQuery这三大核心技术，旨在帮助前端新手...

    D2-淘宝移动端Web开发实践

    ### D2-淘宝移动端Web开发实践 #### 移动端Web开发概述 随着移动互联网的兴起，越来越多的用户开始依赖手机、平板等移动设备来访问网络。为了更好地满足这一趋势，淘宝团队分享了一系列关于移动端Web开发的最佳实践...

    移动端web登录界面

    在移动端Web开发中，设计一个吸引用户且功能完善的登录界面是至关重要的。本文将深入探讨如何构建一个符合移动端特性的Web登录界面，以及响应式设计的相关知识点。 首先，我们需要了解HTML（HyperText Markup ...

    web移动端图片触摸放大效果

    在Web前端开发中，为移动端实现图片触摸放大效果是一项常见的需求。这主要涉及到移动设备上的手势识别、事件处理以及图像的动态缩放。本插件旨在提供手机轮播及图片点击放大、再次点击缩小的功能，以提升用户体验。...

    移动端Web页面适配方案.zip

    在移动端Web页面开发中，适配方案是至关重要的，它涉及到如何确保网页在不同尺寸、分辨率和操作系统上的设备上都能呈现出良好的用户体验。本压缩包文件“移动端Web页面适配方案.zip”内可能包含了一些示例代码（SJT-...

    HTML5手机移动端上传头像裁剪图片代码

    HTML5手机移动端上传头像裁剪图片代码是一个利用现代Web技术实现的移动设备上的功能，让用户能够在选择头像时自由裁剪图片。这个功能在许多社交媒体应用和网站中非常常见，提高了用户体验，允许用户定制自己的个人...

    手机移动端web前端常见问题整理文档

    【手机移动端Web前端常见问题整理文档】 在手机移动端的Web前端开发中，开发者经常会遇到一系列与屏幕尺寸、分辨率、长度单位以及像素密度相关的挑战。理解这些问题对于创建适应各种设备的响应式网页至关重要。 1....

    移动端WebUI框架CMUI.zip

    一个简单粗暴的移动端 Web UI 框架。CMUI 是一个专攻移动网页的 UI 框架，它提供了丰富的组件和简洁的接口，开箱即用。CMUI 帮助开发者摆脱样式细节和兼容性困扰，从而腾出更多精力投入到业务开发中。兼容性浏览器...

    移动端 - web商城

    在移动端开发领域，Web商城是将电子商务体验带入手机和平板电脑的重要组成部分。这个"移动端 - web商城"项目提供了一个基础的HTML结构，用于构建一个简单的移动购物平台。以下是关于这个项目的详细知识点： 1. **...

    HTML5移动端头像剪裁上传

    在现代的Web应用中，用户头像的上传与剪裁功能已经变得相当普遍，尤其是在社交网络、论坛或者个人资料设置中。HTML5移动端头像剪裁上传是这种功能的一个实现，它结合了图片上传和自定义剪裁的能力，让用户可以在手机...

    NovaUI专注移动端WebUI组件

    NovaUI 是一个专为移动端Web应用设计的UI组件库，其核心目标是提供一套轻量、高效且易于使用的界面元素，以帮助开发者快速构建出美观的移动应用界面。这个组件库基于JavaScript技术，特别是针对触屏设备进行了优化，...

    移动web图片上传

    服务器端需要在响应头中设置`Access-Control-Allow-Origin`等字段。 四、性能优化 1. 分块上传：对于大文件，可以采用分块上传，减少内存压力，同时可以实现断点续传。 2. 图片压缩：在上传前，前端可以对图片进行...

    移动端旅游导航Web_APP的设计

    【移动端旅游导航Web_APP的设计】主要探讨的是在当前信息技术高速发展的背景下，如何设计并实现一个轻量级的旅游导航Web应用程序。这个应用充分利用了移动端的便捷性，旨在替代部分原生APP，为用户提供更加高效、...

    web开发的移动端购物网站.zip

    【标题】"移动端购物网站开发基于Web技术" 在当今信息化社会，移动设备的普及使得移动端购物网站成为企业和个人开发者关注的焦点。本项目名为“移动端购物网站”，它利用了先进的Web技术来创建一个适应手机和平板等...

    移动端专题切图

    在移动端开发领域，"移动端专题切图"是一个关键步骤，对于构建高质量的移动网页至关重要。切图，简单来说，就是将设计师完成的图形界面设计稿按照网页或应用的布局结构，精确地切割成一个个可编程的图片或者元素，以...

    移动端web开发H5之音视频

    HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api,可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以在移动设备上完美兼容啦。

    一套完成的webui html5 移动端商城

    【标题】：“一套完成的WebUI HTML5 移动端商城”揭示了这个资源的核心——一个基于HTML5技术构建的全面的移动电商解决方案。在Web开发领域，HTML5是现代网页设计的基础，它增强了浏览器对多媒体的支持，提供了更好...

    前端移动Web第一天：京东移动端首页案例-流式布局.zip

    7. **Viewport Meta标签**：在移动设备上，`&lt;meta name="viewport" content="..."&gt;`标签用来控制页面的视口大小，对于优化移动Web体验至关重要。 8. **JavaScript适配**：除了CSS，JavaScript也可以用于动态调整...

Magicbox
Global site tag (gtag.js) - Google Analytics