手机端的META差异
手机端的META你了解多少?
我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
接下来我们来看看各大网站手机端的meta标签:
一、天猫
- <title>天猫触屏版</title>
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
- <meta charset="utf-8">
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
- <meta content="yes" name="apple-mobile-web-app-capable">
- <meta content="black" name="apple-mobile-web-app-status-bar-style">
- <meta content="telephone=no" name="format-detection">
二、淘宝
- <title>淘宝网触屏版</title>
- <meta charset="utf-8">
- <meta content="yes" name="apple-mobile-web-app-capable">
- <meta content="yes" name="apple-touch-fullscreen">
- <meta content="telephone=no" name="format-detection">
- <meta content="black" name="apple-mobile-web-app-status-bar-style">
- <meta property="wb:webmaster" content="c51923015ca19eb1">
- <meta name="author" content="m.taobao.com">
- <meta name="copyright" content="Copyright ©m.taobao.com 版权所有">
- <meta name="revisit-after" content="1 days">
- <meta name="keywords" content="">
- <meta name="description" content="">
三、京东
- <title> 京东 - 手机版 </title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
- <meta name="format-detection" content="telephone=no">
- <meta name="Keywords" content="手机购物,WAP商城,日用百货,3C家电,汽车用品"><meta name="description" content="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、日用百货等数万种商品,手机快捷购物,就上京东手机版。">
四、网易
- <title>手机网易网</title>
- <meta charset="UTF-8">
- <meta content="width=device-width,user-scalable=no" name="viewport">
- <meta name="apple-itunes-app" content="app-id=425349261">
- <meta name="apple-mobile-web-app-capable" content="yes">
五、百度
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
- <meta name="format-detection" content="telephone=no">
手机端特有的有哪些?
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
- <meta content="yes" name="apple-mobile-web-app-capable">
- <meta content="black" name="apple-mobile-web-app-status-bar-style">
- <meta content="telephone=no" name="format-detection">
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
- width - viewport的宽度 height - viewport的高度
- initial-scale - 初始的缩放比例
- minimum-scale - 允许用户缩放到的最小比例
- maximum-scale - 允许用户缩放到的最大比例
- user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
- 在web app应用下状态条(屏幕顶部条)的颜色;
- 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
- 注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。
转载请注明:玩赚乐 » 学习手机端的META差异,打造自己的移动网页
手机端的META差异的更多相关文章
- 学习手机端的META差异,打造自己的移动网页
我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...
- 手机端的META你有多了解?
我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...
- 涨姿势!手机端的META你知道多少?
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- 手机端的META你知道多少?
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- 手机端的META你知道多少
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- 手机端的META
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- 手机端META详细解释
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- 判断是pc端还是手机端,并跳转到相应页面
<!-- 判断浏览器是否为手机端 --> <script> // class ! function(navigator) { var user ...
随机推荐
- Sphinx 安装与使用(1)-- 安装Coreseek
Coreseek就是Sphinx的中文版 官方网站 http://www.coreseek.cn/ 一.安装 1.修改LANG 永久修改: vim /etc/locale.conf LANG=&quo ...
- Vsphere笔记07 Vcenter 部署流程 2
7.Vcenter 部署流程 2 Vcenter 安装需求 1.硬件要求 CPU:支持VT-X技术并开启内存:4G或4G 以上 2.系统要求 Windows 2008 R2 x64 Vsp ...
- svn密码 在服务端 到底是明文保存,还是密文保存
svn密码 在服务端 到底是明文保存,还是密文保存 之前在ubuntu上搭建svn服务端,记得密码就是明文保存的, 但最近项目,我们老大说,他搭建的是加密后的,我就比较纳闷了, 经过偷偷的瞄一下,不就 ...
- 学习spring1--跟我一起学Spring 3(2)–开发环境配置
http://www.importnew.com/13185.html#spring 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所 ...
- Cocos2dx的ClippingNode裁剪节点使用方式
1.http://shahdza.blog.51cto.com/2410787/1561937 2.http://www.firedragonpzy.com.cn/index.php/archives ...
- WPF的本质:数据和行为
如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种不同的数据并通过UI界面展现出来,然 ...
- node.js的安装与第一个hello world、node.js的初始化
1.下载node.js文件 2.windows下点击安装 重复下一步即可 3.编辑工具 EditPlus编辑器 4.新建保存目录的文件夹,并新建一个文本文档 5.打开EditPlus编辑器 打开 ...
- influxDB选择类函数
1)TOP()函数 作用:返回一个字段中最大的N个值,字段类型必须是长整型或float64类型. 语法: SELECT TOP(<field_key>[,<tag_keys>] ...
- PHP 获得域控内用户的计算机登录名
一个需求: 在域控范围获得访问用户的计算机名.方法: 1.测试软件环境: XAMPP Control Panel V3.2.1 , Apache version 2.4.7 2.Apache 2.2 ...
- Centos之常见目录作用介绍(九)
我们先切换到系统根目录 / 看看根目录下有哪些目录 [root@localhost ~]# cd / [root@localhost /]# ls bin dev home lib64 mn ...