[转载]移动页面所需meta元素和Viewport窗口知识点

Meta标签 vs  Viewport

 http://www.2cto.com/kf/201409/335779.html

http://blog.csdn.net/freshlover/article/details/40432247

Viewport

1、针对移动端浏览器iphone 网站开启对web app的支持

2、

a

user-scalable&＃61;0" name&＃61;"viewport">    

第一个meta标签表示&＃xff1a;强制让文档的宽度与设备的宽度保持1:1&＃xff0c;并且文档最大的宽度比例

是1.0&＃xff0c;且不允许用户点击屏幕放大浏览&＃xff1b;

b

第二个meta标签是iphone设备中的safari私有meta标签&＃xff0c;它表示&＃xff1a;允许全屏模式浏览&＃xff1b;  

c

第三个meta标签也是iphone的私有标签&＃xff0c;它指定的iphone中safari顶端的状态条的样式&＃xff1b;

在web app应用下状态条&＃xff08;屏幕顶部条&＃xff09;的颜色&＃xff1b;

默认值为default&＃xff08;白色&＃xff09;&＃xff0c;可以定为black&＃xff08;黑色&＃xff09;和black-translucent&＃xff08;灰色半透明

&＃xff09;。

注意&＃xff1a;若值为“black-translucent”将会占据页面px位置&＃xff0c;浮在页面上方&＃xff08;会覆盖页面

20px高度–iphone4和itouch4的Retina屏幕为40px&＃xff09;。   

d

第四个meta标签表示&＃xff1a;告诉设备忽略将页面中的数字识别为电话号码。

3、威锋网

Cache-Control头域

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached&＃xff0c;响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

Public指示响应可被任何缓存区缓存

Private指示对于单个用户的整个或部分响应消息&＃xff0c;不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息&＃xff0c;此响应消息对于其他用户的请求无效

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age指示客户机可以接收生存期不大于指定时间&＃xff08;以秒为单位&＃xff09;的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值&＃xff0c;那么客户机可以接收超出超时期指定值之内的响应消息。

4、

1、&＃xff1c;meta name&＃61;"Generator" content&＃61;""&＃xff1e;用以说明生成工具&＃xff08;如Microsoft FrontPage 4.0&＃xff09;等&＃xff1b;

　　2、&＃xff1c;meta name&＃61;"KEYWords" content&＃61;""&＃xff1e;向搜索引擎说明你的网页的关键词&＃xff1b;

　　3、&＃xff1c;meta name&＃61;"DEscription" content&＃61;""&＃xff1e;告诉搜索引擎你的站点的主要内容&＃xff1b;

　　4、&＃xff1c;meta name&＃61;"Author" content&＃61;"你的姓名"&＃xff1e;告诉搜索引擎你的站点的制作的作者&＃xff1b;

5、

&＃xff1c;meta name&＃61;"Robots" content&＃61;"all|none|index|noindex|follow|nofollow"&＃xff1e;

　　其中的属性说明如下&＃xff1a;

　　设定为all&＃xff1a;文件将被检索&＃xff0c;且页面上的链接可以被查询&＃xff1b;

　　设定为none&＃xff1a;文件将不被检索&＃xff0c;且页面上的链接不可以被查询&＃xff1b;

　　设定为index&＃xff1a;文件将被检索&＃xff1b;

　　设定为follow&＃xff1a;页面上的链接可以被查询&＃xff1b;

　　设定为noindex&＃xff1a;文件将不被检索&＃xff0c;但页面上的链接可以被查询&＃xff1b;

　　设定为nofollow&＃xff1a;文件将不被检索&＃xff0c;页面上的链接可以被查询。

http-equiv属性

　　1、&＃xff1c;meta http-equiv&＃61;"Content-Type" content&＃61;"text/html";charset&＃61;gb_2312-80"&＃xff1e;

　　和 &＃xff1c;meta http-equiv&＃61;"Content-Language" content&＃61;"zh-CN"&＃xff1e;用以说明主页制作所使用的文字以及语言&＃xff1b;

　　又如英文是ISO-8859-1字符集&＃xff0c;还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集&＃xff1b; 　　2、&＃xff1c;meta http-equiv&＃61;"Refresh" content&＃61;"n;url&＃61;http://yourlink"&＃xff1e;定时让网页在指定的时间n内&＃xff0c;跳转到页面http;//yourlink&＃xff1b;

　　3、&＃xff1c;meta http-equiv&＃61;"Expires" content&＃61;"Mon,12 May 2001 00:20:00 GMT"&＃xff1e;可以用于设定网页的到期时间&＃xff0c;一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式&＃xff1b;

　　4、&＃xff1c;meta http-equiv&＃61;"Pragma" content&＃61;"no-cache"&＃xff1e;是用于设定禁止浏览器从本地机的缓存中调阅页面内容&＃xff0c;设定后一旦离开网页就无法从Cache中再调出&＃xff1b;

　　5、&＃xff1c;meta http-equiv&＃61;"set-COOKIE" content&＃61;"Mon,12 May 2001 00:20:00 GMT"&＃xff1e;COOKIE设定&＃xff0c;如果网页过期&＃xff0c;存盘的COOKIE将被删除。需要注意的也是必须使用GMT时间格式&＃xff1b;

　　6、&＃xff1c;meta http-equiv&＃61;"Pics-label" content&＃61;""&＃xff1e;网页等级评定&＃xff0c;在IE的internet选项中有一项内容设置&＃xff0c;可以防止浏览一些受限制的网站&＃xff0c;而网站的限制级别就是通过meta属性来设置的&＃xff1b;

　　7、&＃xff1c;meta http-equiv&＃61;"windows-Target" content&＃61;"_top"&＃xff1e;强制页面在当前窗口中以独立页面显示&＃xff0c;可以防止自己的网页被别人当作一个frame页调用&＃xff1b;

　　8、&＃xff1c;meta http-equiv&＃61;"Page-Enter" content&＃61;"revealTrans(duration&＃61;10,transtion&＃61;50)"&＃xff1e;和&＃xff1c;meta http-equiv&＃61;"Page-Exit" contect&＃61;"revealTrans(duration&＃61;20&＃xff0c;transtion&＃61;6)"&＃xff1e;设定进入和离开页面时的特殊效果&＃xff0c;这个功能即FrontPage中的“格式/网页过渡”&＃xff0c;不过所加的页面不能够是一个frame页面。

天猫&＃xff1a;

加了这个 标签 下次打开 会自动切换为 急速模式 第一次没效果哦&＃xff0c;第二次有作用

苏宁&＃xff1a;

name 属性的 apple-mobile-web-app-capable 值&＃xff08;网站开启对 web app 程序的支持&＃xff09;

果壳网&＃xff1a;

baidu-tc-verification是一个百度的声明&＃xff0c;标识网站用到了百度的内容.如果不涉及到版权问题可以删掉&＃xff0c;不影响页面效果.。

 一个网页的标签一般只需设置4个基本属性,分别是[编码方式 | name | description | keywords]&＃xff0c;主要用于搜索引擎检索。

可以在iPhone/iPod Touch上将网页"添加至主屏幕"时&＃xff0c;去掉icon上透明层&＃xff0e;

*****

切记&＃xff1a;

Viewport 在手机端解决长按文本出现选择复制搜索等的方法&＃xff1a;

在body中添加属性&＃xff1a;.-webkit-user-select: none; //长按无法选择文本