1:之前做的是两套页面。现在改成响应式布局。发现加上
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
诸如上面的样式表在手机尺寸的时候不起作用。
因为没加下面这段meta代码
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
平时写的pc端不需要上面这段。手机端需要。在pc端改的话容易忽略上述。
2:meta总结
META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间,它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。
(1)SEO优化:
各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。
<meta name="keywords" content="your tags" />
Description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="150 words" />
标注网页的作者或制作组
<Meta name="Author" Content="张三,abc@sina.com">
标注版权
<Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">
搜索引擎都有自己的“搜索机器人”(ROBOTS),并通过这些ROBOTS在网络上沿着网页上的链接(一般是http和src链接)不断抓取资料建立自己的数据库。对于网站管理者和内容提供者来说,有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法:一个是robots.txt,另一个是The Robots META标签。robots就是一个必须放在网站根目录、让搜索蜘蛛读取的txt文件,文件名必须是小写的"robots.txt"。通过robots.txt可以控制SE收录内容,告诉蜘蛛哪些文件和目录可以收录,哪些不可以收录。 在这里说明下,如果在网站目录下加了这个文件,搜索引擎会认为你是一个比较正规标准的站。
Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;(和 "noindex, no follow" 起相同作用)
index:文件将被检索;(让robot/spider登录)
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)
nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
(2)移动设备
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
height:高度(数值 / device-height)(范围从223 到10,000)
initial-scale:初始的缩放比例 (范围从>0 到10)
minimum-scale:允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩 (no,yes)
(3)忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
(4)忽略识别邮箱
<meta content="email=no" name="format-detection" />
(5)针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
<meta name="HandheldFriendly" content="true">
(6)微软的老式浏览器
<meta name="MobileOptimized" content="320">
(7) uc强制竖屏
<meta name="screen-orientation" content="portrait">
(8) QQ强制竖屏
<meta name="x5-orientation" content="portrait">
(9) UC强制全屏
<meta name="full-screen" content="yes">
(10) QQ强制全屏
<meta name="x5-fullscreen" content="true">
(11) UC应用模式
<meta name="browsermode" content="application">
(12) QQ应用模式
<meta name="x5-page-mode" content="app">
(13)windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">
(14)优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
(15)关于X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
(16)禁止浏览器从本地计算机的缓存中访问页面内容
<meta http-equiv="Pragma" content="no-cache">
(17)用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
(18)Refresh (刷新)让网页多长时间(秒)刷新自己,或在多长时间后让网页自动链接到其它网页。其中的5是指停留5秒钟后自动刷新到URL网址。
<Meta http-equiv="Refresh" Content="30">
<Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net">
(19)Expires (期限)指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。
<Meta http-equiv="Expires" Content="0">
<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">