移动web application前端meta主要设置

发表于:
来源:阿酷技术学习
作者:阿酷

我们做移动WEB application开发时,meta有哪些是专门针对移动开发才有效果呢。本文主要讲解针对移动开发的的专门针对移动专属设置。
有webkit内核的双核浏览器启用webkit内核渲染

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

IE使用最新版本,如果有安装chrome,则用chrome渲染

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

不让百度转码

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

针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

<meta name="HandheldFriendly" content="true">

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

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

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
 

Apple-Specific Meta Tag Keys/苹果规范是meta tag keys

apple-mobile-web-app-capable

设置web application是否运行在全屏模式

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

描述

如果内容设置为yes,则web应用程序以全屏模式运行;否则,则不会运行在全屏模式下。默认行为是使用Safari显示web内容。

您可以使用 window.navigator.standalone确定网页是否以全屏模式显示。注意只有当window.navigator.standalone可读并为true时,则表示全屏显示。

参考:https://stackoverflow.com/questions/10639858/javascript-window-navigator-standalone-broken

可用

IOS可用

apple-mobile-web-app-status-bar-style

设置web application状态栏

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

描述

除非您首先像apple-apple-mobile-web-app-capable中描述的那样指定全屏模式,否则此元标记没有任何效果。如果内容设置为默认值,状态栏将显示为正常。如果设置为黑色,则状态栏的背景为黑色。如果设置为黑色半透明,则状态栏为黑色和半透明。如果设置为默认或黑色,web内容将显示在状态栏下面。如果设置为黑色半透明,web内容将显示在整个屏幕上,部分内容会被状态栏遮挡。默认值是default。

可用

可用for ios

format-detection

在iOS的Safari浏览器中启用或禁用对网页中可能的电话号码的自动检测。

<meta name="format-detection" content="telephone=no">

描述

默认ios的safari能够自动侦测电话号码并且可以有呼叫这个号码,用telephone=no可以关闭这个功能。

viewport

当在ios显示一个页面的时候,改变逻辑窗口的大小

<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">

描述

用这个标签去提升web content的用户体验,你可能用这个标签去设置页面的宽度和视窗的缩放范围

例如,如果你的页面小于980px,那么你应该设置这个属性去适应你的web内容,如果你的程序为IOS规范开发,你应该设置这个属性宽度为DEVICE宽度

表1描述了这个属性支持的KEY和values,当提供多个属性的时候应该用逗号分隔:

  • 不要用分号分隔
  • 空格可以,但逗号更好
  • 对于数字属性,如果包含非数字,但是以数字开头,那么会以这个数字为值。例如1.0X=1.0,123x345=123,如果没有以数字开头,则这个值是0

当提到设备尺寸时,应该用TABLE2提到的常量,而不是数定。例如宽度用device-width代替320,在纵向方向上高度用device-height代替480。

你不必需要去设置所有的值,有时候,仅仅一个子属性被设置,IOS的safari就能推断出其它的值。例如,你设scale=1.0.safari就知道纵向的宽度为设备宽度,横向的宽度为设备高度

例如,你设置视窗的宽度为设备宽度:

<meta name = "viewport" content = "width = device-width">

初始,设置缩放为1.0

<meta name = "viewport" content = "initial-scale = 1.0">

设置初始缩放并且禁止缩放

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

 

 

Table 1 视窗属性

Property

Description

width

The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000.

You can also set this property to the constants described in Table 2.

height

The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels.

You can also set this property to the constants described in Table 2.

initial-scale

The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties.

You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties.

minimum-scale

Specifies the minimum scale value of the viewport. The default is 0.25. The range is from>0 to 10.0.

maximum-scale

Specifies the maximum scale value of the viewport. The default is 5.0. The range is from>0 to 10.0.

user-scalable

Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes.

Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.

Table 2 视窗属性值

Value

Description

device-width

The width of the device in pixels.

device-height

The height of the device pixels.

参考:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW1