布局设置-Meta标签 and Media(来自bootstrap)
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 7link rel="apple-touch-icon" href="touch-icon-iphone57.png" sizes="57x57" /
//retina iPhone/iPod Touch pre iOS 7 *** @2xlink rel="apple-touch-icon" href="touch-icon-iphone4_ipod_touch114.png" sizes="114x114" /
//non-retina iPad pre iOS 7link rel="apple-touch-icon" href="touch-icon-ipad72.png" sizes="72x72" /
//retina iPad pre iOS 7 *** @2xlink rel="apple-touch-icon" href="touch-icon-ipad144.png" sizes="144x144" /
ios7
//non-retina iPhone iOS 7link rel="apple-touch-icon" href="touch-icon-iphone60.png" sizes="60×60" /
//retina iPhone/iPod Touch iOS 7 *** @2xlink rel="apple-touch-icon" href="touch-icon-iphone-iphone4_ipod_touch120.png" sizes="120x120" /
//retina iPhone 6 Plus iOS 7 *** @3xlink rel="apple-touch-icon" href="touch-icon-iphone-iphone6_Plus.png" sizes="180x180" /
//non-retina iPad iOS 7link rel="apple-touch-icon" href="touch-icon-ipad76.png" sizes="76x76" /
//retina iPad iOS 7 *** @2xlink 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 Media媒体查询(media query)可以使用媒体类型和媒体特性。媒体类型表明目标设备类型。媒体类型包括:link rel="apple-touch-startup-image" href="/startup-screen-320×480.png" /
//for iphone Retinalink rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /
//for iphone5 Retinalink rel="apple-touch-startup-image" sizes="640x1136" href="img/splash-screen-640x1136.png" /
//for iphone6 Retinalink rel="apple-touch-startup-image" sizes="750x1334" href="img/splash-screen-750x1334.png" /
//for iPhone6 Plus Retinalink rel="apple-touch-startup-image" sizes="1242x2208" href="img/splash-screen-1242x2208.png" /
//for iPad Landscapelink rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /
//for iPad Portraitlink rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" /
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...
}