from: http://www.w3.org/TR/css3-mediaqueries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
<link media="screen and (max-device- 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device- 480px)" rel="stylesheet" href="m.css" /> <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max- 480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min- 481px)" />
iPhones
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 320px)
and (max-device- 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device- 320px)
and (max-device- 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device- 320px)
and (max-device- 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 320px)
and (max-device- 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device- 320px)
and (max-device- 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device- 320px)
and (max-device- 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 375px)
and (max-device- 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device- 375px)
and (max-device- 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device- 375px)
and (max-device- 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 414px)
and (max-device- 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device- 414px)
and (max-device- 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device- 414px)
and (max-device- 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Galaxy Phones
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device- 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device- 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device- 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device- 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device- 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device- 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
@media screen
and (device- 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device- 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device- 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
HTC Phones
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
and (device- 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device- 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device- 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Nexus Phones
/* ----------- Nexus 4 ----------- */
/* Portrait and Landscape */
@media screen
and (device- 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device- 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device- 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Nexus 5 ----------- */
/* Portrait and Landscape */
@media screen
and (device- 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device- 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device- 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
iPads
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device- 768px)
and (max-device- 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
Galaxy Tablets
/* ----------- Galaxy Tab 10.1 ----------- */
/* Portrait and Landscape */
@media
(min-device- 800px)
and (max-device- 1280px) {
}
/* Portrait */
@media
(max-device- 800px)
and (orientation: portrait) {
}
/* Landscape */
@media
(max-device- 1280px)
and (orientation: landscape) {
}
Nexus Tablets
/* ----------- Asus Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen
and (device- 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device- 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device- 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
Kindle Fire
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 800px)
and (max-device- 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device- 800px)
and (max-device- 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device- 800px)
and (max-device- 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device- 1200px)
and (max-device- 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device- 1200px)
and (max-device- 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device- 1200px)
and (max-device- 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
Laptops
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device- 1200px)
and (max-device- 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device- 1200px)
and (max-device- 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
Apple Watch
/* ----------- Apple Watch ----------- */
@media
(max-device- 42mm)
and (min-device- 38mm) {
}
Moto 360 Watch
/* ----------- Moto 360 Watch ----------- */
@media
(max-device- 218px)
and (max-device-height: 281px) {
}
浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的<head>节点中加入<meta>标签，代码如下：
<!-- HTTP 1.1 --> <meta http-equiv="pragma" content="no-cache"> <!-- HTTP 1.0 --> <meta http-equiv="cache-control" content="no-cache"> <!-- Prevent caching at the proxy server --> <meta http-equiv="expires" content="0"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<script type="text/javascript">
var url = window.location.href;
var u = url.substring(url.indexOf("#") + 1, url.length);
if (url.indexOf("#") > -1) {
if (u == "mobile") {
setCookie("ismobile", "true");
}
}
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/) && u.indexOf('MiuiBrowser') == -1,
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf('MiuiBrowser') > -1,
iPhone: u.indexOf('iPhone') > -1 && u.indexOf('MiuiBrowser') == -1,
iPad: u.indexOf('iPad') > -1,
wp: u.indexOf('IEMobile') > -1 || u.indexOf('Windows Phone') > -1,
Nokia:u.indexOf('Symbian')>-1,
webApp: u.indexOf('Safari') == -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
if (browser.versions.mobile || browser.versions.wp || browser.versions.iPad || browser.versions.iPhone || browser.versions.Nokia) {
if (getCookie("ismobile") != "true") {
location.replace('http://wap.dusystem.com/');
}
}
</script>