移动端专用的meta标签设置大全

2020-04-17 08:09:15易采站长站整理

第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

在web app应用下状态条(屏幕顶部条)的颜色;

默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。

下面看一下各大厂移动端页面 meta

一、天猫


<meta name="aplus-terminal" content="1"/>
<meta name="apple-mobile-web-app-title" content="TMALL"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no, address=no">

二、淘宝


<meta charset="utf-8">

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

<meta content="yes" name="apple-touch-fullscreen"/>

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

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

三、京东


<title> 京东 - 手机版 </title>

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

<meta http-equiv="Content-Type" content="text/html; charset=GBK">

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

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

<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">

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

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

<meta name="Keywords" content="">

<meta name="description" content="">

四、网易