1：之前做的是两套页面。现在改成响应式布局。发现加上

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

诸如上面的样式表在手机尺寸的时候不起作用。

因为没加下面这段meta代码

平时写的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" />

标注网页的作者或制作组

标注版权

搜索引擎都有自己的“搜索机器人”（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顺着此页的连接往下探找)

能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

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" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
(16)禁止浏览器从本地计算机的缓存中访问页面内容
<meta http-equiv="Pragma" content="no-cache">
(17)用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
(18)Refresh (刷新)让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。其中的5是指停留5秒钟后自动刷新到URL网址。

(19)Expires (期限)指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。

关于@media不生效的问题和meta总结关于@media不生效的问题和meta总结

关于@media不生效的问题和meta总结

猜你喜欢

关于@media不生效的问题和meta总结 关于@media不生效的问题和meta总结

关于@media不生效的问题和meta总结

猜你喜欢

关于@media不生效的问题和meta总结关于@media不生效的问题和meta总结