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">

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

转载于:https://www.cnblogs.com/web-chuanfa/p/9168550.html

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

  1. 布局设置-Meta标签 and Media(来自bootstrap)

    为什么80%的码农都做不了架构师?>>>    meta and media Meta标签 and Media http-equiv属性 Charset 网页编码meta chars ...

  2. meta标签及其含义大全

    meta运用在head标签中,但是对于H5中meta标签元素的定义已经运用场景没有几个人能够说是熟练运用的,现在我就来罗列html中meta标签的定义以及运用场景. 定义和用法: <meta&g ...

  3. html5移动端笔记--代码分享

    移动端经常遇到的一些小总结,方便·以后使用: 1.关闭iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,autocapitalize的属性可以实现关闭首字母大写:   ...

  4. web app开发技巧总结

    Web APP开发技巧总结 一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁 ...

  5. 移动端web开发常见问题

    Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题" ...

  6. Linux下搭建jenkins+svn+http+maven自动化部署

    Linux下搭建jenkins+svn+http+maven自动化部署 服务器设置: 卸载redhat的yum,安装centos的yum,配置第三方yum 1.删除redhat原有的rpm -qa | ...

  7. Web APP开发技巧总结(转）

    一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁止它: <meta h ...

  8. 第123天：移动web开发中的常见问题

    一.函数库 underscoreJS _.template: <ol class="carousel-indicators"><!--渲染的HTML字符串--&g ...

  9. 移动端web开发技巧

    META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题" ...

最新文章

  1. 【TensorFlow2.0】(1) tensor数据类型，类型转换
  2. oracle自动化,Oracle 自动化备份脚本
  3. optee3.8 qemu_v8的环境搭建篇
  4. Latex Smartdiagram
  5. YUV测试序列下载地址
  6. uni-app—从安装到卸载
  7. 学习C/C++的简单方法
  8. pythonread读取怎么是乱码_python中如何读写文件不乱码
  9. SAP License：如何学好SAP BASIS
  10. mysql 1z0_MySQL 8 OCP(1Z0-908)认证考试题库原题（第12题）
  11. Excel 2016 对数据做线性回归分析步骤
  12. 学习通网页版无法粘贴至提交答案框的解决方法
  13. 医咖会免费SPSS教程学习笔记—广义线性模型
  14. AVI编码器的常见编码
  15. 成功解决AttributeError: ‘Series‘ object has no attribute ‘split‘
  16. usaco Typo
  17. 使用 minikube 安装 k8s-cluster
  18. 计算机毕业设计ssm课堂考勤管理系统t6x5x系统+程序+源码+lw+远程部署
  19. java.awt.Choice类
  20. 重塑价值：新一代ITSM平台的建设、咨询与实施

热门文章

  1. 《学生快捷记账系统》——个人博客04——星期四
  2. Python练习-装饰器版-为什么我的用户总被锁定
  3. [HTML]POST方法和GET方法
  4. Scala实现冒泡排序、归并排序和快速排序
  5. 解决Asp输出乱码问题
  6. 在线中文繁简体转换工具
  7. Spring延迟依赖注入ObjectFactory/ObjectProvider
  8. VIM 下工程的管理工具
  9. Centos7 下配置mysql5.6主从复制实例（一主两从）
  10. java——关于数组的定义 和 访问修饰符的修饰内容