Meta标签中的format-detection属性及含义

 
format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置:
<meta name="format-detection"   content="telephone=no">
<meta name="format-detection"  content="email=no">
<meta name="format-detection"   content="adress=no" >
也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具体说下每个设置的作用:
一、telephone

  你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

  telephone=no就禁止了把数字转化为拨号链接!
  telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

二、email

  告诉设备不识别邮箱,点击之后不自动发送

  email=no禁止作为邮箱地址!

  email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

三、adress

  adress=no禁止跳转至地图!

  adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

Meta标签中的viewport属性及含义

 
最近在学习移动网页开发,首先看到head里面设置了下面这个属性:

通过搜集资料,大体了解了viewport属性的含义。

一、什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中,也不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的不同部分。移动版的
Safari 浏览器最新引进了viewport 这个 meta tag,让网页开发者来控制 viewport
的大小和缩放,其他手机浏览器也基本支持。
  DPI表示分辨率,指每英寸长度上的点数。 像素是面积概念100dpi*100dpi  = 1000px

二、Viewport基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

1、width
:
 控制viewport的大小,可以指定一个值,如600,
或者特殊的值,如device-width为设备的宽度(单位是缩放为100%的CSS的像素)

2、height
和width相对应,指定高度

3、initial-scale
:
 初始缩放比例,页面第一次加载时的缩放比例

4、maximum-scale
:
 允许用户缩放到的最大比例,范围从0到10.0

5、minimum-scale
:
 允许用户缩放到的最小比例,范围从0到10.0

6、user-scalable
:
 用户是否可以手动缩放,值可以是:①yes、
true允许用户缩放;②no、false不允许用户缩放

三、关于viewport的一些问题

viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport。它们要解决的问题是相同的,即无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,这个分辨率和设备的分辨率无关。比如,你拿个3.5寸-320
* 480的iphone3 gs、3.5寸-640 *
960的iphone4或者9.7寸-1024*768的ipad2,虽然设备的分辨率不同,物理尺寸也不同,但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说,你的网站是800px宽,你可以通过设置viewport的width=800,来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。

  

网上一搜关于viewport的知识,基本上全都是如下信息:

这段代码的意思是,让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。一都主流的web
app都是这么设置的,它的作用其实是故意舍弃viewport,不缩放页面,这样dpi肯定和设备上的真实分辨率是一样的,不做任何缩放,网页会因此显得更高细腻。

meta 的作用 搜集的更多相关文章

  1. [转]移动web开发中meta标签作用

    今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...

  2. 移动端开发的meta标签作用

    一.<meta name="viewport" id="viewport" content="width=device-width, initi ...

  3. 页面的缓存设置与meta的作用详细解释

    网上转的,来自JSP的,但是原理大同小异哦,有时间 写个asp.net版的 HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务 ...

  4. HTML中meta标签作用及属性总结

    在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...

  5. html页面中meta的作用

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...

  6. HTML 中 META的作用

    说明: meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:n ...

  7. JSP标签<meta>的作用

    meta标签: meta标签共有两个属性,它们分别是http-equiv属性和name属性. name 属性 :<meta name="Generator" contect= ...

  8. html meta标签作用

    1.概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务. 必要属性: conten ...

  9. JSP标签 <meta> 的作用

    meta标签: meta标签共有两个属性,它们分别是http-equiv属性和name属性. name 属性 : <meta name="Generator" contect ...

随机推荐

  1. doc_values VS stored field

    doc_values 按列存储,按docId排序,在query阶段使用,直接根据docId获取具体field的value,用来排序,聚合等. stored field按文档存储,按docId排序,一条 ...

  2. C++ 动态数组与链表

    动态数组与链表 动态数组的大小不定,内存连续的,可以根据自己的需要,增加或删除元素.知道第一个元素的,那么就可以知道第二个元素,通过下标访问.如果中间插入一个元素,那么中间后面的元素的下标全部都要改变 ...

  3. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

  4. String类方法的使用

    String类的判断功能: boolean equals(Object obj)  //比较字符串内容是否相同(区分大小写). boolean equalsIgnoreCase(String str) ...

  5. 字符串 hash - 不停地删掉字母

    Censor frog is now a editor to censor so-called sensitive words (敏感词). She has a long text p . Her j ...

  6. Vs中提交了代码但是不想推送到Git中

    1:首先就是我fix code 是要提交上去的,所以我就开始提交呢,但是,一看提交后,还没有推送到git就是现在下面的这个状态 上面这个是==> 这是先新增的文件,第一步.但是第一步就差推送了, ...

  7. MTV

    M:模型 models.py T:模板 html C:控制 urls.py 和 views.py 与MVC类似

  8. 异数OS TCP协议栈测试(三)--长连接篇

    异数OS TCP协议栈测试(三)--长连接篇 本文来自异数OS社区 github:   异数OS-织梦师(消息中间件)群: 476260389 异数OS TCP长连接技术简介 说起长连接,则首先要谈对 ...

  9. [bzoj2668] [洛谷P3159] [cqoi2012] 交换棋子

    Description 有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. Input 第一行 ...

  10. 每天玩转3分钟 MyBatis-Plus - 6. select 用法

    每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一) 每天玩转 ...