江苏龙网

  1. 主页 > 生活百科 > >

SEO优化干货：meta属性详解( 三 )

meta属性


迅速搜索了一下，才明白原来不是微软增强了IE，而是谷歌做了个外挂：google ChromeFrame（谷歌内嵌浏览器框架GCF） 。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是GoogleChrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器，谷歌这个墙角挖的真给力！
而上文提到的那个meta标记，则是在是安装了GCF后，用来指定页面使用chrome内核来渲染 。
 
安装完成后,如果你想对某个页面使用GCF进行渲染，只需要在该页面的地址前加上 gcf： 即可，例如：gcf:http://toutiao.com
但是如果想要在开发时指定页面默认首先使用GCF进行渲染，如果未安装GCF再使用IE内核进行渲染，该如何进行呢？
就是使用这个标记 。
 
标记用法：
下面来简单讲解一下这个标记的语法 。
1.最基本的用法：在页面的头部加入
<meta http-equiv = "X-UA-Compatible" content = "chrome=1" >
用以声明当前页面用chrome内核来渲染 。
复杂一些的就是本文一开始看到的用法：
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染 。
2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染：
在HTTP的头文件中加入以下信息：X-UA-Compatible: chrome=1
在Apache服务器中，确保 mod_headers 和mod_setenvif文件可用，然后在httpd.conf中加入以下配置信息：
< IfModule mod_setenvif.c>
< IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header Append X-UA-Compatible "chrome=1" env=gcf
</ IfModule >
</ IfModule >
 
在IIS7或者更高版本的服务器中，只需要修改web.config文件,添加如下信息即可即可:
< configuration >
< system.webServer >
< httpProtocol >
< customHeaders >
< add name = "X-UA-Compatible" value =https://www.isolves.com/it/wlyx/SEO/2022-07-20/ "chrome=1" />
</ customHeaders >
</ httpProtocol >
</ system.webServer >
</ configuration >
 
移动平台的meta标签1、Meta 之 viewport
说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？
viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域 。
对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320，这时我们320页面在iphone上显示成啥效果呢？有人可能认为iPhone不是320的宽度莫，感觉应该是满屏的吧，事实呢？我们来看一下如下布局在iPhone上的显示情况 。
<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上显示如图：

SEO优化干货：meta属性详解

文章插图
 
因此我们必须改变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，形如：


推荐阅读


上一篇：独立站的权重计算你了解吗？

下一篇：关于基带芯片，苹果多次栽跟头，自研基带芯片有多难？