手机端的META你了解多少?

我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

接下来我们来看看各大网站手机端的meta标签:
一、天猫

  1. <title>天猫触屏版</title>
  2. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  3. <meta charset="utf-8">
  4. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  7. <meta content="telephone=no" name="format-detection">

二、淘宝

  1. <title>淘宝网触屏版</title>
  2. <meta charset="utf-8">
  3. <meta content="yes" name="apple-mobile-web-app-capable">
  4. <meta content="yes" name="apple-touch-fullscreen">
  5. <meta content="telephone=no" name="format-detection">
  6. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  7. <meta property="wb:webmaster" content="c51923015ca19eb1">
  8. <meta name="author" content="m.taobao.com">
  9. <meta name="copyright" content="Copyright ©m.taobao.com 版权所有">
  10. <meta name="revisit-after" content="1 days">
  11. <meta name="keywords" content="">
  12. <meta name="description" content="">

三、京东

  1. <title> 京东 - 手机版 </title>
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
  3. <meta name="format-detection" content="telephone=no">
  4. <meta name="Keywords" content="手机购物,WAP商城,日用百货,3C家电,汽车用品"><meta name="description" content="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、日用百货等数万种商品,手机快捷购物,就上京东手机版。">

四、网易

  1. <title>手机网易网</title>
  2. <meta charset="UTF-8">
  3. <meta content="width=device-width,user-scalable=no" name="viewport">
  4. <meta name="apple-itunes-app" content="app-id=425349261">
  5. <meta name="apple-mobile-web-app-capable" content="yes">

五、百度

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  2. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  3. <meta name="format-detection" content="telephone=no">

手机端特有的有哪些?

  1. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  2. <meta content="yes" name="apple-mobile-web-app-capable">
  3. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  4. <meta content="telephone=no" name="format-detection">

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

  1. width - viewport的宽度 height - viewport的高度
  2. initial-scale - 初始的缩放比例
  3. minimum-scale - 允许用户缩放到的最小比例
  4. maximum-scale - 允许用户缩放到的最大比例
  5. user-scalable - 用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

  1. web app应用下状态条(屏幕顶部条)的颜色;
  2. 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
  3. 注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

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

转载请注明:玩赚乐 » 学习手机端的META差异,打造自己的移动网页

手机端的META差异的更多相关文章

  1. 学习手机端的META差异,打造自己的移动网页

    我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...

  2. 手机端的META你有多了解?

    我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...

  3. 涨姿势!手机端的META你知道多少?

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  4. 手机端的META你知道多少?

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  5. 手机端的META你知道多少

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  6. 手机端的META

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  7. 手机端META详细解释

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  8. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  9. 判断是pc端还是手机端,并跳转到相应页面

    <!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var user ...

随机推荐

  1. Sphinx 安装与使用(1)-- 安装Coreseek

    Coreseek就是Sphinx的中文版 官方网站 http://www.coreseek.cn/ 一.安装 1.修改LANG 永久修改: vim /etc/locale.conf LANG=&quo ...

  2. Vsphere笔记07 Vcenter 部署流程 2

    7.Vcenter 部署流程 2   Vcenter 安装需求   1.硬件要求 CPU:支持VT-X技术并开启内存:4G或4G 以上   2.系统要求 Windows 2008 R2 x64 Vsp ...

  3. svn密码 在服务端 到底是明文保存,还是密文保存

    svn密码 在服务端 到底是明文保存,还是密文保存 之前在ubuntu上搭建svn服务端,记得密码就是明文保存的, 但最近项目,我们老大说,他搭建的是加密后的,我就比较纳闷了, 经过偷偷的瞄一下,不就 ...

  4. 学习spring1--跟我一起学Spring 3(2)–开发环境配置

    http://www.importnew.com/13185.html#spring     首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所 ...

  5. Cocos2dx的ClippingNode裁剪节点使用方式

    1.http://shahdza.blog.51cto.com/2410787/1561937 2.http://www.firedragonpzy.com.cn/index.php/archives ...

  6. WPF的本质:数据和行为

    如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种不同的数据并通过UI界面展现出来,然 ...

  7. node.js的安装与第一个hello world、node.js的初始化

    1.下载node.js文件 2.windows下点击安装  重复下一步即可 3.编辑工具  EditPlus编辑器 4.新建保存目录的文件夹,并新建一个文本文档 5.打开EditPlus编辑器  打开 ...

  8. influxDB选择类函数

    1)TOP()函数 作用:返回一个字段中最大的N个值,字段类型必须是长整型或float64类型. 语法: SELECT TOP(<field_key>[,<tag_keys>] ...

  9. PHP 获得域控内用户的计算机登录名

    一个需求: 在域控范围获得访问用户的计算机名.方法: 1.测试软件环境: XAMPP Control Panel V3.2.1 ,  Apache version 2.4.7 2.Apache 2.2 ...

  10. Centos之常见目录作用介绍(九)

    我们先切换到系统根目录 / 看看根目录下有哪些目录 [root@localhost ~]# cd / [root@localhost /]# ls bin   dev  home  lib64  mn ...