常用meta标签

作为前端开发,我们经常与meta标签打交道,meta标签中有和seo相关的keyword、description等,还有与移动端的实际尺寸与网页尺寸的比例等

设置编码


charset可以选择gb2312、GBK,iso-xxx、UTF-8等,国际范例都是选择UTF-8,gb2312和GBK只会在国内使用,而且有时会出现乱码,所以推荐charset使用utf-8。

优先使用 IE 最新版本和 Chrome






这个想来是不用解释了(其实是作者大大不知道怎么解释,词穷)

浏览器内核控制


国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。 而添加meta标签的网站可以控制浏览器选择何种内核渲染。

国内双核浏览器默认内核模式如下:360极速浏览器、遨游浏览器:Webkit内核(极速模式)。

禁止浏览器从缓存中访问数据


这么设置用户无法脱机访问,如果想做离线应用不要添加这个标签

避免百度转码申明


用百度访问时,有可能被转码,避免转码可添加这个meta

SEO优化



keywords是页面关键字,description是页面的描述,这两个是一个网站做seo必备的两个标签。(这个是重点,考试要考)

WebApp全屏模式


启用全屏模式, 伪装app,离线应用。

隐藏状态栏/设置状态栏颜色


只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。

添加到主屏后的标题


忽略数字自动识别为电话号码


忽略识别邮箱


强制竖屏





windows phone 点击无高光


移动端常用meta标签

     
     
     

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。

天猫

天猫触屏版 
 
 
 

 

网易

手机网易网




淘宝

淘宝网触屏版











京东




你可能感兴趣的:(常用meta标签)