文档章节

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

透笔度
 透笔度
发布于 2016/02/25 14:22
字数 1923
阅读 1218
收藏 2

       meta and media

Meta标签 and Media

http-equiv属性

Charset

网页编码meta charset="utf-8"

Content-Language

设置网页语言meta  http-equiv="content-Language" contect="zh-CN"

Refresh

指定的时间刷新页面(秒)meta http-equiv="refresh" content="300"

Set-cookie

设定页面cookie过期时间,操作cookie跟js操作cookie类似meta http-equiv="set-cookie" content="name=value;expires=date;path=url"

last-modified

页面的最后生成时间meta http-equiv="last-modified" content="Thu, 18 Nov 2008 19:11:42 GMT"

location???

重定向到另一个网址???

window-target

指定了这个属性的iframe,会在加载这个iframe的页面窗口打开,可防止别人在框架里调用自己的页面meta http-equiv="window-target" content="_top"

date

指定页面创建的日期

Pragma(cache模式)

设置是否缓存网页,禁止浏览器从本地计算机的缓存中访问页面内容meta http-equiv="pragma" content="no-cache"

Expires

设定网页Cache过期时间,必须使用GMT的时间格式meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"

cache-control

设置文档的缓存机制
             * public:浏览器和缓存服务器都可以缓存页面信息
* private:只缓存在浏览器端
* no-cache:浏览器和缓存服务器都不应该缓存页面信息
* no-store:请求和响应的信息都不应该被存储在对方的磁盘系统中        meta http-equiv="cache-control" content="no-cache"

X-UA-Compatible

强制使用浏览器的最高版本模式进行渲染,主要是避免用户安装了IE9,但浏览器却以IE7模式进行渲染的问题meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /

name属性

keywords

定义网页关键词meta name="keywords" content="meta mobile" /

description

定义网页简短描述meta name="description" content="XXX" /

date

定义网页生成时间meta name="date" content="2014-10-08T11:17:30+00:00" /

author

定义网页作者meta name="author" content="http://www.china.com/" /

copyright

定义网页版权meta name="copyright" content="© http://www.china.com" /

robots

用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引meta name="robots" content="none"

renderer

360首创的浏览器内核控制meta name="renderer" content="webkit|ie-comp|ie-stand"        

Apple-mobile-web-app-title

添加到主屏时的标题meta name="apple-mobile-web-app-title" content="标题"

Apple-mobile-web-app-status-bar-style(ios2.1以上支持)

隐藏状态栏,default 为默认参数meta name="apple-mobile-web-app-status-bar-style" content="black" /

Apple-mobile-web-app-capable(ios2.1以上支持)

设置一个web应用程序是否在全屏模式下运行,当使用苹果手机浏览网页时,可以令最下的选单消失meta name="apple-mobile-web-app-capable" content="yes" /

Format-detection(ios1.0以上支持)

忽略将页面中的数字识别为电话号码meta name="format-detection" content="telephone=no" /

Viewport

告诉浏览器如何规范的渲染网页meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" user-scalable="no"
//width:viewport 的宽度(范围从223 到10,000)
//height:viewport 的高度(范围从223 到10,000)
//initial-scale:初始的缩放比例(范围从>0 到10)
//minimum-scale:允许用户缩放到的最小比例(范围从>0 到10)
//maxnim-scale:允许用户缩放到的最大比例(范围从>0 到10)
//user-scalable:用户是否可以手动缩 (no,yes)
//minimal-ui:ios 7.1新增页面加载时可以最小化上下状态栏

Msapplication

win8磁贴的图像和背景颜色(磁贴图像必须是长 144px 宽 144px 的方形 PNG)        meta name="msapplication-TileImage" content="img/xxx-144.png"/
meta name="msapplication-TileColor" content="#d83434"/

"link" apple-touch-icon

创建桌面图标和启动画面,在meta标签中指定它的值可以使得你的网页在保存至主屏时,显示为自定义的icon,而不是网页的缩略图;apple-touch-icon-precomposed 禁止ios7以前系统自动添加效果(圆角和高亮),直接显示设计原图
 图标搜索的优先级如下:
 1. 如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标
 2. 如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标
 3. 如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标
 4. 如果未在区域指定用link标签指定图标,会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标

Device Screen iOS version Icon size
iPhone Classic 6 and prior 57x57
7 60x60
Retina 6 and prior 114x114
7 120x120
iPad Classic 6 and prior 72x72
7 76x76
Retina 6 and prior 144x144
7 152x152

pre ios7
//non-retina iPhone pre iOS 7
link rel="apple-touch-icon" href="touch-icon-iphone57.png" sizes="57x57" /
//retina iPhone/iPod Touch pre iOS 7 *** @2x
link rel="apple-touch-icon" href="touch-icon-iphone4_ipod_touch114.png" sizes="114x114" /
//non-retina iPad pre iOS 7
link rel="apple-touch-icon" href="touch-icon-ipad72.png" sizes="72x72" /
//retina iPad pre iOS 7 *** @2x
link rel="apple-touch-icon" href="touch-icon-ipad144.png" sizes="144x144" /

           ios7
//non-retina iPhone iOS 7
link rel="apple-touch-icon" href="touch-icon-iphone60.png" sizes="60×60" /
//retina iPhone/iPod Touch  iOS 7 *** @2x
link rel="apple-touch-icon" href="touch-icon-iphone-iphone4_ipod_touch120.png" sizes="120x120" /
//retina iPhone 6 Plus iOS 7 *** @3x
link rel="apple-touch-icon" href="touch-icon-iphone-iphone6_Plus.png" sizes="180x180" /
//non-retina iPad iOS 7
link rel="apple-touch-icon" href="touch-icon-ipad76.png" sizes="76x76" /
//retina iPad iOS 7 *** @2x
link rel="apple-touch-icon" href="touch-icon-ipad152.png" sizes="152x152" /

"link" apple-touch-startup-image(ios2.1以上支持)

给网页声明启动画面,类似原生app。但是被声明的图片对于iphone和iPod touch 大小只能是 320 x 480 ,其他大小的都无效。但是同样你可以通过sizes 来进行多设备适配//for iphone 320×480
link rel="apple-touch-startup-image" href="/startup-screen-320×480.png" /
//for iphone Retina
link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /
//for iphone5 Retina
link rel="apple-touch-startup-image" sizes="640x1136" href="img/splash-screen-640x1136.png" /
//for iphone6 Retina
link rel="apple-touch-startup-image" sizes="750x1334" href="img/splash-screen-750x1334.png" /
//for iPhone6 Plus Retina
link rel="apple-touch-startup-image" sizes="1242x2208" href="img/splash-screen-1242x2208.png" /

           //for iPad Landscape
link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /
//for iPad Portrait
link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" /
  Media媒体查询(media query)可以使用媒体类型和媒体特性。媒体类型表明目标设备类型。媒体类型包括:

  • all (所有设备类型)

  • screen (电脑屏幕)

  • handheld (手持设备)

  • tv (电视类型设备)

媒体特性包括一些参数:

  • 浏览器窗口的最大,最小尺寸(width and height)

  • 屏幕的宽高(device-width and device-height)

  • 屏幕方向(landscape横向 or portrait纵向)

media_query: [only | not]? media_type [ and expression ]*
expression: ( media_feature [: value]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid@media all and (max-width:550px){
  body{...}
}

320px,640px,800px,1024px,1028px...

@media screen and (max-width:320px){
  ...
}

Smart phone

BlackBerry Torch

@media screen and (max-device-width:480px){
  Landscape...
}

iPhone

@media screen and (max-device-width:320px){
  Landscape...
}
@media screen and (max-device-width:480px){
  Portrait...
}

iPhone 3G

@media screen and (device-width:320px) and (device-height:480px) and (-webkit-device-pixel-ratio:1){
  ...
}

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){
  ...
}

iPhone 5

@media screen and (device-aspect-ratio:40/71){
  ...
}
OR
@media screen and (device-width:320px) and (device-height:568px) and (-webkit-device-pixel-ratio:2){
  ...
}

HTC Evo,HD2,HTC Thunderbolt

@media screen and (max-device-width:480px){
  Landscape...
}

Samsung Galaxy S2

@media screen and (device-width:320px) and (device-height:533px) and (-webkit-device-pixel-ratio:1.5){
  Landscape...
}

Samsung Galaxy S3

@media only screen and (-webkit-device-pixel-ratio:2){
  ...
}

Tablet

Google Nexus 7

@media screen and (device-width:600px) and (device-height:905px) and (-webkit-min-device-pixel-ratio:1.331) and (-webkit-max-device-pixel-ratio:1.332){
  ...
}

iPad Mini

@media screen and (device-width:768px) and (device-height:1024px) and (-webkit-device-pixel-ratio:1){
  ...
}

iPad,iPad 2,iPad 3,HP TouchPad,Vizio Tablet VTAB1008

@media (max-device-width:1024px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:768px) and (orientation:portrait){
  Portrait...
}

iPad 4

@media screen and (device-width:768px) and (device-height:1024px) and (-webkit-device-pixel-ratio:2){
  ...
}

Samsung GALAXY Tab 10.1,Sony Tablet S,Lenovo IdeaPad K1,Lenovo ThinkPad Tablet,Acer Iconia Tab A500,Toshiba Thrive,Motorola's Xoom

@media (max-device-width:1280px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:800px) and (orientation:portrait){
  Portrait...
}

HTC EVO View 4G,HTC Flyer,Netbook Navigator Nav 9 Slate PC,ViewSonic ViewPad 10,Acer Iconia Tab A100,Archos 101,BlackBerry PlayBook,Coby Kyros MID1024,MID1125,CTL 2goPad SL10

@media (max-device-width:1024px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:600px) and (orientation:portrait){
  Portrait...
}

Archos 70

@media (max-device-width:800px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:400px) and (orientation:portrait){
  Portrait...
}

ASUS Eee Pad Slider,Asus Eee Pad Transformer

@media (max-device-width:1080px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:800px) and (orientation:portrait){
  Portrait...
}

Dell Streak 5,Dell Streak 7,EFun Nextbook Next5,Maylong Universe M 150,Velocity Micro Cruz,ViewSonic ViewPad 7,Augen GenTouch78,Coby Kyros MID7015, MID7016, MID7022, MID7024, MID7125

@media (max-device-width:800px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:480px) and (orientation:portrait){
  Portrait...
}

Coby Kyros MID8125,MID8024

@media (max-device-width:800px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:600px) and (orientation:portrait){
  Portrait...
}

ExoPC Slate

@media (max-device-width:1366px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:768px) and (orientation:portrait){
  Portrait...
}

T-Mobile G-Slate

@media (max-device-width:1280px) and (orientation:landscape){
  Landscape...
}
@media (max-device-width:768px) and (orientation:portrait){
  Portrait...
}

本文转载自:http://v3.bootcss.com/components/

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
CSS核心内容整理 - (下)

前言 整体来说CSS还是比较容易掌握的,如果你愿意话大量的时间去实践,当然这更像是废话.CSS中有很多细节的东西,没有办法一一拿出来说,所以在整个系列中我就挑出了我认为最重要的CSS内容,所谓最...

顽Shi
2014/05/03
1K
5
bootstrap引入的css和js

bootstrap引入的css和js 1. 引入css样式文件到HTML页面中 <link type="text/css" rel="stylesheet" href="bootstrap.min.css" media="screen"> 2. 如果需要使用Bootstrap一些插件的话,需要引......

ardong
2016/08/11
116
0
让Bootstrap 3兼容IE8浏览器

让Bootstrap 3兼容IE8浏览器 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文...

次长风
2015/07/31
237
1
自适应网页设计代码需要做的6大调整

果你熟悉html,那么自适应设计其实只不过是在原PC端的html代码上做一些改动而已,并非一门新的技术语言。而至于自适应网页设计代码需要做哪些调整,归纳来说,有6个调整是需要做的。 自适应网...

hhj187
2016/08/23
23
0
5)bootstrcp和ajax技术的使用和介绍

JQ的dom用法: append:追加 Title

tty之星
2018/07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
12
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部