4

移动端web页面开发常用的头部标签设置

 1 year ago
source link: https://blog.p2hp.com/archives/10759
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在移动端web页面开发中，我们常需要设置各种头部标签以帮助浏览器更好的解析页面，将页面完美呈现，这里列出了工作中常用的各种头部标签，以备查询。

viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

使用目的：阻止页面缩放

Safari 无效，其他均能阻止页面缩放
safari可以使用以下方法

window.onload = function() {
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {//多触点
      event.preventDefault();//阻止默认缩放
    }
  })
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function(event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault(); //阻止双击放大
    }
    lastTouchEnd = now;
  }, false)
}

ios meta

<meta name="apple-mobile-web-app-capable" content="yes"/>

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

<meta name="apple-mobile-web-app-title" content="标题">

设置添加到主屏后的标题

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

在web app应用下状态条（屏幕顶部条）的颜色，default（白色）black（黑色） black-translucent（灰色半透明）
若值为"black-translucent"将会占据页面位置（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

<meta name="format-detection" content="telphone=no, email=no"/>

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

iOS 添加到主屏图标

<link rel="apple-touch-icon" href="apple-touch-icon.png">

ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png"/>

iPhone 和 iTouch，默认 57x57 像素，必须有

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png"/>

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

图标使用的优先级如下：

  • 如果没有跟相应设备推荐尺寸一致的图标，会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
  • 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。

iOS 启动画面

iPhone

<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png"   />

iPhone Retina

<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

iPhone 5

<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

iPad portrait

<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

iPad landscape

<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

iPad Retina portrait

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

iPad Retina landscape

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

<link rel="dns-prefetch" href="//api.m.taobao.com">

DNS预解析

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

添加 favicon icon

<meta name="renderer" content="webkit">

启用360浏览器的极速模式(webkit)

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE使用现有最高版本

<meta http-equiv="Cache-Control" content="no-siteapp" />

不让百度转码

<meta name="x5-orientation" content="portrait">

QQ强制竖屏

<meta name="x5-fullscreen" content="true">

QQ强制全屏

<meta name="x5-page-mode" content="app">

QQ应用模式

<meta name="screen-orientation" content="portrait">

UC强制竖屏

<meta name="full-screen" content="yes">

UC强制全屏

<meta name="browsermode" content="application">

UC应用模式

<meta name="msapplication-tap-highlight" content="no">

windows phone 点击无高光

<meta name="robots" content="index,follow"/>

搜索引擎抓取
说明：
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
具体参数如下：
信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

HTML meta标签总结,HTML5 head meta属性整理
Safari Web Content Guide
Safari HTML Reference


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK