学习手机端的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 ...
- 【学习】如何制作手机端html模板(REM的实际应用)
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...
- vux 组件打造手机端项目
其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux; 比较顺利吧. 2 ...
- 手机端学习助手的说明书需求以及团队PM选择
1.产品的背景 课堂上知识容量大.密度高,学生不能立刻掌握所学知识点,同时,网上资料冗杂繁复,指向性不强,导致学生不能高效的学习,为了充分利用学生的课余时间,培养学生自学能力,辅助老师教学,我们小组希 ...
随机推荐
- IOS之TableViewCell重用机制解决上下刷新重复显示
首先我是一个经验浅薄的iOS开发人员,这个问题想必许多初学者经常遇到这些问题,在面试中也会经常问到.现在我们一一解决. 首先我们要知道TableViewCell重用机制的原理是什么,我们抽象的理解为古 ...
- jQuery是什么
在使用jQuery之前,我们需要了解jQuery是个什么东东. 顾名思义,j是JavaScript而query的意思是查询. jQuery就是用javascript更加方便的查询和控制页面控件 ,即 ...
- Swift 2.2 多态和强制转换
写在前面: 写点东西,就是想告诉自己,有时间其实你也在前进着,快慢不说,至少没停下吧!该有的都会有的.不瞎BB了,说主题,3.0 的多态和继承. 总觉得继承好像也没什么太多的可说的了,在项目中用到的还 ...
- swift 2.0 与 OC 相比较,标签栏和导航栏书写的差别
下面是swift书写的时候的两个方法,其实这里不是教大家怎么样写的这个问题,我是想通过这两个不同语言的进行的一个比较,向大家找他们之间“想法”上的一些相同点,这样子我们学习swift的时候,就可以更加 ...
- api接口json串换行
1.问题描述:在后台输入框中明明回车换行了,但是返回到 app客户端显示出来的 确实带有 \n 这个时候无论怎么调试都不行: 2.铺垫:大家都知道 php输出字符串的时候 使用 单引号 比使用 双 ...
- Cordova的搭建
Cordova的搭建 cordova也叫phonegap,可以用来打包网页生成Android或iOS或其他平台的APP,它提供了一些native api,可以让网页调用本地函数,极大地增强了网页的功能 ...
- 一个不错的windows编程网址
http://www.zklmc.com/ 含有MFC,C#,web开发资料
- Sublime Text3安装、注册、插件安装教程
在前端开发中,有很多软件供我们使用:大名鼎鼎的WebStorm,老而弥坚的Dreamweaver,后起之秀Hbuilder,还有小清新Sublime Text.......等等.作为新手, ...
- PDO数据访问抽象层
PDO数据访问抽象层: 我们使用的mysqli是针对mysql这个数据库扩展的一个类,如果要用到别的数据库的话就可以用PDO来做 1.操作数据库 先来代码 <!--PDO--> <! ...
- ci 框架发送邮箱
定义数据 $config = array( 'protocol' =>'smtp', 'smtp_host'=>'ssl://smtp.163.com', 'smtp_u ...