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. Linux网卡驱动(4)—DM9000网卡驱动程序完全分析

    1.硬件连接 mini2440开发板上DM9000的电气连接和mach-mini2440.c文件的关系 其中片选信号AEN使用了nGCS4,所以网卡的内存区域在BANK4,也就是从地址0x200000 ...

  2. selenium之 文件上传所有方法整理总结

    本文转载“灰蓝”的原创博客.http://blog.csdn.net/huilan_same/article/details/52439546 文件上传是所有UI自动化测试都要面对的一个头疼问题,今天 ...

  3. 【mac】配置sublime开发C

    1.sublime text3,Tools/Build System/New Build system创建一个新配置文件. {"cmd": ["gcc", &q ...

  4. Neo4j原生语句cc

    Cypher语句 Cypher语句是Neo4j的图查询语言.以下例子来自Neo4j Browser,启动后在命令栏输入:play cypher即可1. 创建一个节点: 语法:CREATE (node- ...

  5. HDU 6651 Final Exam (思维)

    2019 杭电多校 7 1006 题目链接:HDU 6651 比赛链接:2019 Multi-University Training Contest 7 Problem Description Fin ...

  6. 剑指offer——40字符串的排列

    题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述: 输 ...

  7. tensorflow 训练网络loss突然出现nan的情况

    1.问题描述:开始训练一切都是那么的平静,很正常! 突然loss变为nan,瞬间懵逼! 2.在网上看了一些解答,可能是梯度爆炸,可能是有关于0的计算.然后我觉得可能是关于0的吧,然后进行了验证. 3. ...

  8. centos7下jenkins升级

    systemctl stop jenkins cd cd /usr/lib/jenkins/ mv jenkins.war jenkins.war.bac rz #上传下载好的最新jinkens.wa ...

  9. 反射与类加载之ClassLoader与类加载器（二）

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从以下几个内容来阐述反射与类加载: [动态代理模式] [Android ...

  10. 如何运行linux shell程序

    原文地址:http://www.sohu.com/a/138822796_610671 首先,我们从一个十分简单的例子test.sh开始吧: #!/bin/sh #this is a test. cd ...