News Contents
信息中心

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

发表日期:2019/9/1      浏览次数:

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


盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
  下一篇:没有了!
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!