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. vue 复习篇. 注册全局组件,和 组件库

    初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...

  2. 多图上传控制器及模型代码（2）thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  3. SpringBoot项目框架下ThreadPoolExecutor线程池+Queue缓冲队列实现高并发中进行下单业务

    主要是自己在项目中(中小型项目) 有支付下单业务(只是办理VIP,没有涉及到商品库存),目前用户量还没有上来,目前没有出现问题,但是想到如果用户量变大,下单并发量变大,可能会出现一系列的问题,趁着空闲 ...

  4. 正则表达式Pattern类的基本用法

    public void mailRegex() { // 要验证的字符串 String str = "shiruo.hdp@taobao.com"; // 邮箱验证规则 Strin ...

  5. 3.3 理解 Redux 中间件(转)

    这一小节会讲解 redux 中间件的原理,为下一节讲解 redux 异步 action 做铺垫,主要内容为: Redux 中间件是什么 使用 Redux 中间件 logger 中间件结构分析 appl ...

  6. python 出现indentationError:expected an indented block!

    出现这个问题,代码一般是没问题的,剩下你要考虑: 1. 缩进对齐是否有问题 2. python脚本的格式是啥,如果你在linux上运行,编码需要是unix;  (大部分情况下,我们是在windows下 ...

  7. flex 布局，flex-grow 宽度未等比放大问题解决办法

    本文转载自:https://blog.csdn.net/sinat_41695090/article/details/79215893 先粘贴上一段代码,flex总体布局 <body> & ...

  8. BBS论坛 home主页与个人站点主页

    五.Home主页与个人站点主页 home首页代码: # views.py视图函数部分代码def home(request): # 将数据库中的所有文章展示到主页 article_list = mode ...

  9. Dubbo管理端工具

    要得到dubbo的管理端工具其实很简单,只需要下面几步: 1.下载源码:我下载的是dubbo-dubbo-2.5.7.zip . 2.使用maven命令编译源码,得到war包: 将下载的dubbo-d ...

  10. react 路由使用react-router-dom

    react 和vue一样都是使用封装history 来进行页面跳转,下面就来说一下react常用的路由插件react-router-dom这个东西在GitHub上 目前是最受欢迎的 首相还是先下载 n ...