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. jmeter基本问题

    jmetet加压的时候不用图像界面(GUI),直接在命令行加压(命令行生成一个report-命令行参数),不做断言,不加监听器--不然会很卡: 进入就meter命令行: 后置处理器可以从HTML页面拿 ...

  2. Spring Boot下启用https

    1.需要一个证书,可以自己生成或者购买.下面是我们通过keytool自己生成. 打开运行,输入cmd,进入命令行 输入生成命令: keytool -genkey -alias tomcat -stor ...

  3. （转）秒懂，Java 注解 （Annotation）你可以这样学 ---- 重要 注解定义与反射解析

    转:http://blog.csdn.net/briblue/article/details/73824058 文章开头先引入一处图片.  这处图片引自老罗的博客.为了避免不必要的麻烦,首先声明我个人 ...

  4. Http协议中get和post的区别 转载https://www.cnblogs.com/lexiaofei/p/http.html

    get(默认值)是通过URL传递表单值,数据追加在action属性后面. post传递的表单值是隐藏到http报文体中,url中看不到. get是通过url传递表单值,post通过url看不到表单域的 ...

  5. GF学习未解之谜

    1.很奇怪事件管理器里面的用到的订阅事件里面的ID是通过typeof(xxx).GetHashCode()得到的,怎么解决id重复的问题? 2.log系统里面是不是直接全部当做多参数解决问题比较好?

  6. 机器学习技法笔记：Homework #5 特征变换&Soft-Margin SVM相关习题

    原文地址:https://www.jianshu.com/p/6bf801bdc644 特征变换 问题描述 程序实现 # coding: utf-8 import numpy as np from c ...

  7. Apache POI环境设置

    本章将指导完成Apache POI在Windows和Linux系统为基础的设置过程. Apache POI可以轻松地安装和集成,下面没有任何复杂的设置过程,通过几个简单步骤,目前Java环境,用户管理 ...

  8. Red Hat Enterprise Linux 7.7 使用最小化安装后，怎么安装桌面的解决方法

    准备工具: xshell6,xftp6,到官网(https://www.netsarang.com/zh/downloading/)进行下载,教育版的,个人使用 虚拟机安装教程百度即可,安装时有两个重 ...

  9. splay模版

    //splay模版 #include<iostream> #include<cstdio> #include<cstdlib> #include<cstrin ...

  10. C语言typedef

    #include <stdio.h> //基本类型 typedef int MyInt; //可以对typedef产生的类型名二次起别名 typedef MyInt MyInt2; // ...