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

一、手机端特有的有哪些

1、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？

viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域
。对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320，这时我们320页面在iphone上显示成啥效果呢？有人可能认为iPhone不是320的宽度莫，感觉应该是满屏的吧，事实呢？我们来看一下如下布局在iPhone上的显示情况

HTML 代码   复制

<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <title>Meta Viewport</title>


    <style type="text/css">

    div,body{

    padding:0;

    margin:0;

    }

    body{

    padding-top:100px;

    color:#fff;

    }

    div{

    width:320px;

    height:100px;

    margin:0 auto;

    background:#000;

    text-align:center;

    font:30px/100px Arial;

    }

    </style>

</head>

<body>

<div>

AppUE

</div>

</body>

</html>

在iPhone上显示如图

因此我们必须改变viewport，我们就有如下几种属性值可以设置

width: viewport  的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
height: viewport  的高度 （范围从 223 到 10,000 ）
initial-scale:  初始的缩放比例 （范围从>0到 10 ）
minimum-scale:  允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable:  用户是否可以手动缩放

对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone 会根据你设置的属性自动推算其他属性值，而非直接采用默认值。

如果你把initial-scale=1 ，那么 width 和 height在竖屏时自动为320*356 （不是320*480 因为地址栏等都占据空间 ），横屏时自动为 480*208。类似地 ，如果你仅仅设置了 width ，就会自动推算出initial-scale 以及height。例如你设置了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了。 那么到底这些设置如何让 Safari 知道 ？其实很简单 ，就一个 meta ，形如：

设置了meat后我们页面将如此呈现了

我们就可以按全屏来布局我们的页面了，不用再担心页面显示的很小了

2、<meta name="format-detection" content="telephone=no">

当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

在 iPhone 上默认值是：

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：

<meta name="format-detection" content="telephone=no"/>

3、<meta name="apple-mobile-web-app-capable" content="yes" />

说明：网站开启对web app程序的支持。

4、<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：

  • 在web app应用下状态条（屏幕顶部条）的颜色；
  • 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

二、苹果web app其他设置

1、<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

说明：这个link就是设置web app的放置主屏幕上icon文件路径

使用：

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）
2、<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

说明：这个link就是设置启动时候的界面（图片五），放置的路劲和上面类似。

使用：

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 官方规定启动界面的尺寸必须为 320*640（px），原本以为Retina屏幕可以支持双倍，但是不支持，图片显示不出来。

三、关于手机网站的meta标签，请大家看几个网站的例子

1、天猫

 
HTML 代码   复制

<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">

2、淘宝

 
HTML 代码   复制

<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="">

3、京东

 
HTML 代码   复制

<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="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、日用百货等数万种商品，手机快捷购物，就上京东手机版。">

4、网易

 
HTML 代码   复制

<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">

5、百度

 
 
HTML 代码   复制

<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的使用的更多相关文章

  1. 自适应手机网站meta name代码

    <meta name="viewport" content="width=device-width,initial-scale=1.0">   co ...

  2. 帝国cms制作手机网站

    1.操作前,我们需要先对网站数据库进行备份. 接下来我们添加手机站的模板组.点击"模板", 选择"模板组管理"中的"导入/导出模板组",然后 ...

  3. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  4. 支付宝手机网站支付流程（Node实现）

    前言 公司M站要接入支付宝,借机研究了一下支付宝的支付流程.毕竟,只有公司才能拿到支付接口权限. 主要参考文档: https://doc.open.alipay.com/doc2/detail?tre ...

  5. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  6. 手机网站的tips[转载]

    原文:http://www.haorooms.com/post/phone_web 1. 安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经 ...

  7. 制作移动端手机网站过程中的SEO优化方法技巧

    据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...

  8. html网站meta标签大全

    案例 一.天猫 <meta charset="utf-8"> <title>天猫TMALL</title> <meta name=&quo ...

  9. JavaScript选择打开手机网站还是电脑网站

    现在手机网站越来越普遍,类似京东.淘宝.新浪等等大家都推出了wap版,一种简单的方法判断,JavaScript选择打开手机网站还是电脑网站,如果是手机网站就让网页跳转到手机网址.如果是电脑网站,打开电 ...

随机推荐

  1. Delphi 实现最近打开文件记录菜单

    unit UntOpenMenu; //download by http://wwww.NewXing.com interface uses Windows, Messages, SysUtils, ...

  2. iOS 几种定时器

    //第一种 每一秒执行一次(重复性) double delayInSeconds = 1.0; timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_ ...

  3. 1.5 React 与 DOM

    在这一节中,主要的讨论范围为 React 与 DOM 相关的处理,包括: 如何获取 DOM 元素 如何做事件响应处理 表单处理 style 属性 这节讲述过后,我们将会为 TODO 应用添加完整的事件 ...

  4. 【C++】清空一个C++栈的快速方法

    来源:https://stackoverflow.com/questions/40201711/how-can-i-clear-a-stack-in-c-efficiently/40201744 传统 ...

  5. Ubuntu12.04下删除文件夹内所有的.svn文件

    前段时间在公司里遇到一个问题,从svn上下载下来的文件含有.svn文件,如何删除当前目录下的所有.svn文件呢? 一个个手动删除显然不可能,太多了.其实在Ubuntu12.04下延伸至其他所搜的Lin ...

  6. strcmp 和 strcoll的区别

    功能和strcmp类似,用法也一样.   特别注意:strcoll()会依环境变量LC_COLLATE所指定的文字排列次序来比较s1和s2 字符串.   strcmp是根据ASCII来比较2个串的.  ...

  7. C# WinfForm 控件之dev报表 XtraReport （四） 动态绑定主从关系表

    一般的单据都是由主从关系的,比如部门与人员.单据表头与表身.仓库与存货.分类与档案等等 所以主从关系是报表用的最多的 1.准备数据库 简单方便 --主表 create table RdRecord ( ...

  8. C# 获取系统开机时间

    原文:C# 获取系统开机时间 ///         ///  获取系统开机时间          ///         ///         private DateTime GetComput ...

  9. 结对编程UI

    GitHub:https://github.com/zsl1996/UI/commits/master 一.            实验内容 这是交付给最终用户的软件,有一定的界面和必要的辅助功能.完 ...

  10. boost 实现读写锁

    #include <boost/thread/shared_mutex.hpp> #include <boost/thread/locks.hpp> using BoostMu ...