手机端的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 ...
随机推荐
- Say goodbye to 重复代码---Eclipse代码模板的使用
我们在开发过程中,有些代码是经常重复编写的,而且是必要的,如单例模式,观察者模式. 每次都是重复重复再重复. 那么如何提高我们的效率呢? 要记住,我们使用的是IDE,不是文本编辑器.善用工具,事半功倍 ...
- Prelogin error: host 127.0.0.1 port 1434 Error reading prelogin response: Connection reset ClientConnectionId:26d4b559-c985-4b2e-bd8e-dd7a53b67e48
我在使用SSM框架的时候,连接的是sqlserver 2008r2数据库,但是查询数据的时候总是出现这样的警告信息,导致的结果是第一次登录的时候获取数据慢或者获取数据失败,具体的log信息如下 警告: ...
- Struts2 Action/动作
动作是Struts2框架的核心,因为他们的任何MVC(模型 - 视图 - 控制器)框架.每个URL将被映射到一个特定的动作,它提供了来自用户的请求提供服务所需的处理逻辑. 但动作也提供其他两个重要的能 ...
- CentOS 6.5 Ruby源码安装
清除旧版Ruby,若存在 yum remove ruby 若为源码,使用如下命令 cd <your-ruby-source-path> make uninstall 下面开始安装Ruby ...
- php 佛祖保佑 永无bug
<pre name="code" class="java">/* _ooOoo_ o8888888o 88" . "88 (| ...
- Unity3D学习笔记——组件之Mesh(网格)
Mesh:网格组件.主要用于设置外形和外表. Mesh Filter:网格过滤器.就是为游戏对象添加一个外形. 例:设置外形为Sphere 如果获取的网格拥有蒙皮信患,Unity将自动创建一个skn ...
- poj 1270(dfs+拓扑排序)
题目链接:http://poj.org/problem?id=1270 思路:就是一简单的dfs+拓扑排序,然后就是按字典序输出所有的情况. http://paste.ubuntu.com/59872 ...
- poj 2112(二分+多重匹配)
题目链接:http://poj.org/problem?id=2112 思路:由于要求奶牛走的最远距离的最短路程,显然我们可以二分距离,如果奶牛与挤奶器的距离小于等于limit的情况下,能够满足,则在 ...
- ssh远程登录+查看系统版本+使用scp命令上传下载
ssh远程登录命令简单实例 ssh命令用于远程登录上Linux主机. 常用格式:ssh [-l login_name] [-p port] [user@]hostname 更详细的可以用ssh ...
- 第9章 Docker Swarm 相关问题
9.1 我的 Docker 版本是 1.12,请问我跑的是一代 Swarm 还是二代 Swarm 啊? ……自己运行的 Swarm 怎么会连自己都不知道跑的是啥?