移动端声明及meta标签设置

移动端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,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备那么大展示；

视口的宽度可以通过meta标签设置；

此属性为移动端页面视口设置；

width：视口的宽度，width=device-width：宽度是设备的宽度

initial-scale：初始化缩放，- initial-scale=1.0：不缩放

user-scalable：是否允许用户自行缩放，取值0或1，yes或no

minimum-scale：最小缩放

maximum-scale：最大缩放

一般设置了不允许缩放，就没必要设置最大最小缩放了。

4.Cache-Control头域

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下,

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存

must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。

5.是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

<meta http-equiv="Pragma" content="no-cache"/>

6.禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。

这个标签的默认值是telephone=yes。

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

7.删除默认的苹果工具栏和菜单栏

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

当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

8.控制状态栏显示样式

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

content设置状态栏颜色

9.条件注释

• html5shiv让浏览器可以识别html5的新标签；

• respond让低版本浏览器可以使用CSS3的媒体查询。

控制显示区域各种属性：

<metacontent="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"name="viewport">

  width                      - viewport的宽度

height – viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

IOS中Safari允许全屏浏览：

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

IOS中Safari顶端状态条样式：

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

忽略将数字变为电话号码：

<metacontent="telephone=no"name="format-detection">

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

IOS中Safari设置保存到桌面图标：

这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px

<linkrel="apple-touch-icon"href="custom_icon.png">

// 手势事件

touchstart //当手指接触屏幕时触发

touchmove //当已经接触屏幕的手指开始移动后触发

touchend //当手指离开屏幕时触发

touchcancel

// 触摸事件

gesturestart //当两个手指接触屏幕时触发

gesturechange //当两个手指接触屏幕后开始移动时触发

gestureend

// 屏幕旋转事件

onorientationchange

// 检测触摸屏幕的手指何时改变方向

orientationchange

// touch事件支持的相关属性

touches

targetTouches

changedTouches

clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)

clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)

screenX　　　 // Relative to the screen

screenY 　　 // Relative to the screen

pageX　　 　　// Relative to the full page (includes scrolling)

pageY　　　　 // Relative to the full page (includes scrolling)

target　　　　 // Node the touch event originated from

identifier　　 // An identifying number, unique to each touch event

1. 屏幕旋转事件：onorientationchange

添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：

// 判断屏幕是否旋转

functionorientationChange() {

switch(window.orientation) {

　　case0: 

        alert("肖像模式 0,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

        break;

　　case-90: 

        alert("左旋 -90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

        break;

　　case90:   

        alert("右旋 90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

        break;

　　case180:   

    　　alert("风景模式 180,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

    　　break;

};<br>};

// 添加事件监听

addEventListener('load', function(){

orientationChange();

window.onorientationchange = orientationChange;

});

1. 隐藏地址栏 & 处理事件的时候，防止滚动条出现：

// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现

addEventListener('load', function(){

    setTimeout(function(){ window.scrollTo(0, 1); }, 100);

});

1. 双手指滑动事件：

// 双手指滑动事件

addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},

 false// 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)

);

functiontwoFingerScroll(ev) {

vardelta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ，而后执行相应操作

returntrue;

};

1. 判断是否为iPhone：

// 判断是否为 iPhone ：

functionisAppleMobile() {

return(navigator.platform.indexOf('iPad') != -1);

};

1. localStorage:

例子 ：（注意数据名称 n 要用引号引起来）

varv = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ，则将其读出 ，赋予变量 v 。

localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据

localStorage.removeItem('n'); // 删除名称为 n 的数据

1. 使用特殊链接：

如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,

<ahref="tel:12345654321">打电话给我</a>

<ahref="sms:12345654321">发短信</a>

或用于单元格：

<tdοnclick="location.href='tel:122'">

1. 自动大写与自动修正

要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：

<inputtype="text"autocapitalize="off"autocorrect="off"/>

声明viewport视口

viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。

width 正整数或device-width 定义视口的宽度，单位为像素

height 正整数或device-height 定义视口的高度，单位为像素

initial-scale [0.0-10.0] 定义初始缩放值

minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置

maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置

user-scalable yes/no 定义是否允许用户手动缩放页面，默认值yes

忽略数字自动识别为电话号码

在IOS Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。比如：7位数字，形如：1234567；带括号及加号的数字，形如：(+86)123456789；双连接线的数字，形如：00-00-00111；11位数字，形如：13800138000可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。

关闭电话自动识别：开启拨打电话/发送短信功能立即拨打电话立即发送短信如果同样也需要禁止自动识别邮箱，可以在原来的基础上增加“email=no”。开启自动识别邮箱给我们发邮件

把页面增加到桌面主屏幕

在苹果手机的Safari浏览器中访问一个页面，用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上（就像安装一个APP，在主屏幕上就会有一个操作的图标），这样下一次可以直接点击图标打开页面。(只对IOS有效)

当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示。

WebApp全屏模式

设置状态栏颜色

只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的，即白色，网页从状态栏以下开始显示) | black(状态栏将为黑色，网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上)。

添加到主屏后的图标

IOS系统中对ICON有一套规范，就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”，是IOS设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。rel="apple-touch-icon-precomposed"是设定按照设计稿原图的图标显示，rel="apple-touch-icon"是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

添加到主屏后的标题

QQ浏览器(X5内核)独有的META

//->设置屏幕方向 //->设置全屏

UC浏览器独有的META

//->设置屏幕方向 //->设置全屏 //->缩放不出现滚动条 //->夜间模式

强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个<img src="" show="force"/>

使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。

作者：兜兜里冒糖糖
链接：https://www.jianshu.com/p/0298c859bb0d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。