一、天猫

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

手机端特有的有哪些?

<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标签表示:告诉设备忽略将页面中的数字识别为电话号码。

本人默认写法

    <head>
<!--告诉浏览器准备接受一个 HTML 文档-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--默认编码UTF-8-->
<meta charset="UTF-8">
<!--默认采用webkit模式-->
<meta name="renderer" content="webkit"/>
<!--IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!--(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)-->
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!--是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏-->
<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"/>
<!--Email不被显示为发送Email链接-->
<meta name="format-detection" content="email=no">
<!--关键字-->
<meta name="keywords" content=""/>
<!--描述信息-->
<meta name="description" content=""/>
<!--作者-->
<meta name="author" content="lgsp_Harold-Hua">
<title>标题</title>
<!--公共样式-->
<link rel="stylesheet" type="text/css" href="../css/global.css"/>
<!--模块样式-->
<link rel="stylesheet" type="text/css" href="../css/module.css" />
<!--动画样式-->
<link rel="stylesheet" type="text/css" href="../css/animation.css"/>
<!--响应式样式-->
<link rel="stylesheet" type="text/css" href="../css/responsive.css" />
</head>

手机网页制作教程META标签你知道多少?【转+加】的更多相关文章

  1. 转载:手机网页制作的认识(有关meta标签)

    下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...

  2. Dreamweaver CS5网页制作教程

    说到Dreamweaver这个网页制作神器,不由得想起在学校里上的选修课,那是的我们只知道 table 布局,只知道构建网站最方便的是使用“所见即所得”编辑器.回忆一下,真的是很怀旧啊! 虽说咱现在大 ...

  3. 手机网页制作的认识(有关meta标签)

    近日以来一直在看JQuery Mobile 一个手机开发框架,说实话真的很头疼的~~~~ 因为里面有很多的属性.方法和事件~~~ 下面是手机网页的一些认识: 一.<meta name=" ...

  4. 网页设计:Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  5. 手机页面中的meta标签

    以前看书的时候,觉得meta标签就只有一个charset对于我来说是有用的.前段时间有个学弟让我写个手机版的网页,我才知道原来meta标签有那么多学问. meta指元素可提供有关页面的元信息(meta ...

  6. HTML5 手机网页制作笔记

    http://top.css88.com/archives/546 http://www.w3cfuns.com/blog-5470280-5406828.html 最近在卓手机网页,第一次入手.把要 ...

  7. 手机网页的头部meta的相关配置~~

    今天使用sublime写手机端网页的时候,发现木有meta的自动生成手机网页的快捷键·~ 然后就去网上巴拉,准备存储一份~~哈哈 一.天猫 <title>天猫触屏版</title&g ...

  8. HTML5网页制作教程:HTML5块级链接

    网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...

  9. 手机网页制作的认识(有关meta标签)(转)

    仅用来记录学习: 链接地址:https://blog.csdn.net/ye1992/article/details/22714621

随机推荐

  1. Kivy折腾笔记

    最近想用Python开发APP,选择kivy,记录过程 首先是源码安装,各种蛋疼的报错放弃了.cython高版本有问题. python3 -m pip install cython==0.23 pyt ...

  2. python3+requests库框架设计06-测试脚本

    在项目下新建TestCase文件夹,然后新建.py文件在文件中写关于接口具体的测试脚本,一般我喜欢按照模块来分,一个模块一个.py文件,建议以test开头命名文件 把配置文件改成这样 url:http ...

  3. 设计模式C++学习笔记之一(Strategy策略模式)

    无意中,从网上下到一本电子书<24种设计模式介绍与6大设计原则>,很好奇这里有24种设计模式,印象中GOF写的<设计模式>(Design Patterns),好像只有23种吧. ...

  4. U盘文件系统格式

    u盘文件系统主要有FAT32.NTFS两种 ● FAT32文件系统 FAT32使用4个字节(也就是32位)的空间来表示每个扇区(Sector)配置文件的情形,故称之为FAT32.FAT16的分区容量上 ...

  5. 消息队列:JMS之基本概念介绍

    摘要:The Java Message Service (JMS) API is a messaging standard that allows application components bas ...

  6. CF449C:Jzzhu and Apples

    题意简述 给出正整数n,你要把1-n之间的正整数分成尽可能多组,使得每一组两个数的最大公约数大于1;输出能分成最多组的个数,并按任意顺序输出每组的两个数. 很妙的一道题. 首先我们考虑去处理每个质数的 ...

  7. 鸟哥Linux私房菜基础学习篇学习笔记2

    鸟哥Linux私房菜基础学习篇学习笔记2 第九章 文件与文件系统的压缩打包: Linux下的扩展名没有什么特殊的意义,仅为了方便记忆. 压缩文件的扩展名一般为: *.tar, *.tar.gz, *. ...

  8. 判断鼠标进入容器的方向小Demo

    参考资料: 贤心博客:http://sentsin.com/web/112.html, Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsr ...

  9. Mysql 通过frm&ibd 恢复数据

    mysql存储在磁盘中,各种天灾人祸都会导致数据丢失.大公司的时候我们常常需要做好数据冷热备,对于小公司来说要做好所有数据备份需要支出大量的成本,很多公司也是不现实的.万一还没有做好备份,数据被误删除 ...

  10. 【进阶2-3期】JavaScript深入之闭包面试题解

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://github.com/yygmind/blog/issues/19 作用域指的是一个变量和函数的作用范围,JS中函数内声明的所有变 ...