javascript: detect screen size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-moible-web-app-capable" content="yes">
<meta name="apple-moible-web-app-status-bar-style" content="black">
<title>Get Screen Resolution of Mobile Devices with JavaScript</title>
<meta http-equiv="Refresh" content="10000000000000" />
<meta content=" Detect Screen 检测客户端显示窗口大小 " name="keywords">
<meta content=" Detect Screen 检测客户端显示窗口大小" name="description">
<meta name="author" content="Geovin Du 涂聚文">
<meta http-equiv="X-UA-Compatible" content="IE =EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="chrome =1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:type" content="geovindu website">
<meta property="og:title" content="Car Visualizer" />
<meta property="og:image" content="http://www.dusystem.com/geovindu.jpg" />
<meta property="og:url" content="http://www.dusystem.com/js/" />
<meta property="og:description" content="geovindu." />
<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- For iPad with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/gif" />
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:360px;)" href="portrait-screen.css" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="Css/IE6.css" media="all" />
<![endif]-->
<!--if lte IE 6]>
<script src="js/letskillie6.zh_CN.pack.js"></script>
<!--endif]-->
<style type="text/css">
/*媒体查询方法 https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/ */
@media screen and (max-width:960px) and (min-width:450px) {
body {
background-color: #E5080B;
}
}
@import url("phone.css") screen and (max-width:360px);
/**
* Font To Web 迷你繁篆书
* http://font-to-web.com
* the font designed for your website
*/
@font-face {
font-family: 'minizhuanshu';
src: url('http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.eot'); /*IE 9 Compat Modes*/
src: url('http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.eot?#iefix') format('embedded-opentype'), /*IE6-IE8 */
/* src: local('minizhuanshu'),
local('minizhuanshu'), */
url('http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.woff') format('woff'), /*Modern Browsers*/
url('http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.ttf') format('truetype'), /*Safari,Android,iOS */
url('http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.svg#minizhuanshu') format('svg'); /*Legacy iOS */
font-weight: normal;
font-style: normal; /*字体样式*/
font-display: swap; /* 先匹配到的已经能够使用的字体,字体成功载入后切换字体*/
}
html{
-webkit-text-size-adjust:100%; /*Safari */
-moz-text-size-adjust:100%; /*Firefox*/
-ms-text-size-adjust:100%; /*Microsoft*/
/*Opera o-*/
/*Konqueror -khtml*/
/*RIM -rim*/
/*Chrome -chrome*/
/*避免文本字体大小重置*/
text-size-adjust:100%;
}
body {
/** ie 8以上background-size:cover; 背景图自适应*/
background: url(normal1.png) no-repeat;
background-size: 100% 100%;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size: 100% 100%;
font-family: minizhuanshu !important; /*字体名*/
font-family: minizhuanshu;
font-display: swap; /* 先匹配到的已经能够使用的字体,字体成功载入后切换字体*/
}
.ht, .wd {
width: 150px;
height: 10px;
background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50,#42c264); /*Safari */
background-image: -moz-linear-gradient(#4fec50,#42c264); /*Firefox*/
background-image: -o-linear-gradient(#4fec50,#42c264); /*Opera*/
background-image: -ms-linear-gradient(#4fec50,#42c264); /*IE*/
background-image: -chrome-linear-gradient(#4fec50,#42c264); /*Chrome*/
background-image: linear-gradient(#4fec50,#42c264);
}
.box {
font-family: minizhuanshu !important; /*字体名*/
font-family: minizhuanshu;
}
canvas {
border: 1px solid red;
background-size: 100% 100%;
height: 100%;
width: 100%;
font-family: minizhuanshu !important; /*字体名*/
font-family: minizhuanshu;
font-display: swap; /* 先匹配到的已经能够使用的字体,字体成功载入后切换字体*/
}
img, object, video, embed {
max-width: 100%;
}
img {
max-width: 100%;
max-width: 128px;
max-height: 128px;
height: auto;
zoom: expression( function(e) {
if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }}
else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }}
e.style.zoom = '1'; }(this));
overflow: hidden;
}
</style>
<script src="Scripts/jquery-3.4.1.js"></script>
<!--[if lt IE9]>
<script>
//IE6/7/8兼容HTML5和css3
(function() {
if (!/*@cc_on!@*/0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
// load and implement all unsupported features
webshims.polyfill();
// or only load a specific feature
//webshims.polyfill('forms es5');
</script>
<script src="js/css3-mediaqueries.min.js"></script>
<script async type="text/javascript">
var tensor_obj;
function Refresh() {
window.location.reload();
}
setTimeout('Refresh()', 100000); //10秒刷新一次
window.onload = function () { //加载页面的时候就执行
tensor_obj = document.getElementById("canvasdu"); //根据ID获取html元素
var heigth_screen = window.innerHeight; //获取整个屏幕的分辨率
var width_screen = window.innerWidth;
heigth_screen = heigth_screen * 0.85; //在这里分配整个界面的85%给iframe来显示嵌套的界面
tensor_obj.style.height = heigth_screen + "px";
width_screen = width_screen * 0.85;
tensor_obj.style.width = width_screen + "px";
console.log(width_screen);
drawImage(tensor_obj);
}
//
function resizeimg(obj, maxW, maxH) {
var imgW = obj.width;
var imgH = obj.height;
if (imgW > maxW || imgH > maxH) {
var ratioA = imgW / maxW;
var ratioB = imgH / maxH;
if (ratioA > ratioB) {
imgW = maxW;
imgH = maxW * (imgH / imgW);
}
else {
imgH = maxH;
imgW = maxH * (imgW / imgH);
}
obj.width = imgW;
obj.height = imgH;
}
//obj.style.margin - left=(800 - imgW) / 2;
//obj.style.margin - top=(800 - imgH) / 2;
}
//背景图片自适应 变动时加载
window.onresize = window.onload = function () {
var w, bgImg, h;
if (!!(window.attachEvent && !window.opera)) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else {
w = window.innerWidth;
h = window.innerHeight;
} if (w > 1650) {
document.getElementById("msg").value = "窗大小：" + "w:" + w + ",h:" + h;
//bgImg = document.getElementById("bg").getElementsByTagName("img")[0];
//bgImg.width = (w - 5);
} else {
document.getElementById("msg").value = "窗大小：" + "w:" + w + ",h:" + h;
// bgImg = document.getElementById("bg").getElementsByTagName("img")[0];
//bgImg.width = 1650;
}
drawImage(tensor_obj);
}
//edit: Geovin Du from https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript
// https://ryanve.com/_php/airve/chromosome/request.php?request=lab/resolution/
//
$(document).ready(function () {
//1
var width = window.screen.width * window.devicePixelRatio;
var heiht = window.screen.height * window.devicePixelRatio;
$('#swidth').val(width);
$('#sheight').val(heiht);
//2
heiht = window.screen.availHeight
width = window.screen.availWidth
$('#swidth2').val(width);
$('#sheight2').val(heiht);
//3
heiht = window.screen.height
width = window.screen.width
$('#swidth3').val(width);
$('#sheight3').val(heiht);
width = window.innerWidth
heiht = window.innerHeight
$('#swidth4').val(width);
$('#sheight4').val(heiht);
//第一次加载
document.getElementById("msg").value = "大小：" + "w:" + width + "，h:" + heiht;
//显示器像素颜色位深
width = screen.pixelDepth;
heiht = screen.colorDepth;
$('#swidth5').val(width);
$('#sheight5').val(heiht);
//
$('#swidth6').val(screen.orientation.type);
$('#sheight6').val(screen.orientation.angle);
$('#swidth7').val(navigator.oscpu);
$('#sheight7').val(navigator.vendor);
//
navigator.geolocation.getCurrentPosition((position) => p = position);
$('#swidth8').val(navigator.platform);
$('#sheight8').val(p.timestamp);
var lat = p.coords.latitude;
var lon = p.coords.longitude;
$('#swidth9').val(lat);
$('#sheight9').val(lon);
//var res = require('res');
//document.write(res.dppx()); // 1
//document.write(res.dpi()); // 96
// document.write(res.dpcm()); // 37.79527559055118
/*
var $imgs = $("img");
for (var i = 0; i < $imgs.length; i++) {
if ($imgs[i].width > document.body.clientWidth) {
$imgs[i].height = $imgs[i].height * ((document.body.clientWidth - 80) / $imgs[i].width);
$imgs[i].width = document.body.clientWidth - 80;
$imgs[i].onclick = function () { window.open(this.src) };
$imgs[i].title = "点击查看大图";
$imgs[i].style.cursor = "pointer";
}
}*/
});
function getResolution() {
var width = window.screen.width * window.devicePixelRatio;
var heiht = window.screen.height * window.devicePixelRatio;
$('#swidth').val(width);
$('#sheight').val(heiht);
//alert("Your screen resolution is: " + window.screen.width * window.devicePixelRatio + "x" + window.screen.height * window.devicePixelRatio);
}
!function (root, name, make) {
if (typeof module != 'undefined' && module.exports) module.exports = make()
else root[name] = make()
}(this, 'res', function () {
var one = { dpi: 96, dpcm: 96 / 2.54 }
function ie() {
return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
}
function dppx() {
// devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
}
function dpcm() {
return dppx() * one.dpcm
}
function dpi() {
return dppx() * one.dpi
}
return { 'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm }
});
</script>
</head>
<body onload="draw('canvasdu')">
<div>width*height， 涂聚文</div>
<div><input class="wd" id="swidth" type="text" /><input class="ht" id="sheight" type="text" /><br /></div>
<div><input class="wd" id="swidth2" type="text" /><input class="ht" id="sheight2" type="text" /><br /></div>
<div><input class="wd" id="swidth3" type="text" /><input class="ht" id="sheight3" type="text" /><br /></div>
<div><input class="wd" id="swidth4" type="text" /><input class="ht" id="sheight4" type="text" /><br /></div>
<div><input class="wd" id="swidth5" type="text" /><input class="ht" id="sheight5" type="text" /><br /></div>
<div><input class="wd" id="swidth6" type="text" /><input class="ht" id="sheight6" type="text" /><br /></div>
<div><input class="wd" id="swidth7" type="text" /><input class="ht" id="sheight7" type="text" /><br /></div>
<div><input class="wd" id="swidth8" type="text" /><input class="ht" id="sheight8" type="text" /><br /></div>
<div><input class="wd" id="swidth9" type="text" /><input class="ht" id="sheight9" type="text" /><br /></div>
<div><button type="button" onclick="getResolution();">Get Resolution</button></div>
<div><input class="wd" id="msg" type="text" /></div>
<canvas id="canvasdu"></canvas>
<div class="box" id="box" style="display:none;"></div>
<input type="button" value="下载画报" onclick="downloadimg();" />
<script>
var context;
const myFont = new FontFace("minizhuanshu", "url(http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.ttf)")
myFont.load().then(font => {
document.fonts.add(font)
}).then(() => {
const cvs = document.querySelector("canvasdu");
const ctx = cvs.getContext("2d");
ctx.font = "30px minizhuanshu";
ctx.fillStyle = 'green';
ctx.fillText("涂聚文", 50, 50);
ctx.strokeStyle = 'green';
ctx.stroke();
})
//
function draw(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //获取对应的2D对象(画笔)
context.fillStyle = 'green'; //设置填充的背景颜色
context.fillRect(0, 0, 800, 300); //绘制 800*300 像素的已填充矩形：
context.fillStyle = '#fff';
context.strokeStyle = '#fff'; //设置笔触的颜色
context.font = "bold 40px 'minizhuanshu','minizhuanshu','微软雅黑','宋体'"; //设置字体
context.textBaseline = 'hanging'; //在绘制文本时使用的当前文本基线
context.fillText('Geovin Du', 10, 40); //设置文本内容
context.fillText('《canvas轻松入门》', 40, 110);
context.fillText('涂聚文', 280, 180);
context.stroke();
}
//在Canvas上绘制自适应窗口
var canvas = document.getElementById("canvasdu");
if (canvas.getContext) {
context = document.getElementById("canvasdu").getContext("2d");
context.font = "30px minizhuanshu";
context.stroke();
}
else {
alert("浏览器不支持canvas！");
}
// this function fill an image on canvas
function drawImage(image) {
//
context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
//需根据窗体大小打印字并且是一个平行的缩小或放大（几何学）
var fonttop,fontleft;
if(image.height < 600)
{
fonttop = 30;
fontleft = 10;
}
else if (image.height < 600 && image.width<600) {
fonttop = 30;
fontleft = 10;
}
else if(image.height>600 && image.height<1200 && image.width>600 && image.width<1200)
{
fonttop = 150;
fontleft = 120;
}
else
{
fonttop = 250;
fontleft = 120;
}
context.fillStyle = "#fff"; // 文字填充颜色
context.font = "30px minizhuanshu";
context.fillText("牛年快乐！牛气冲天！", fontleft + 20, fonttop+0);
context.fillStyle = "#fff";
context.font = "40px minizhuanshu";
context.fillText("2021年", fontleft + 20, fonttop +40);
context.fillStyle = "#fff";
context.font = "26px minizhuanshu";
context.fillText("我也会一直陪在你身边,Geovin Du", fontleft + 20, fonttop+70);//要分分行，如果宽度不够时
context.fillStyle = "yellow";
context.font = "26px minizhuanshu";
context.lineWidth = 1;
var str = "同是天涯人,好好珍惜相遇的情谊。"
// context.fillText(str,65,750);
var lineWidth = 0;
var canvasWidth = canvas.width - 50;//计算canvas的宽度
var initHeight = fonttop +110;//绘制字体距离canvas顶部初始的高度
var lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
lineWidth += context.measureText(str[i]).width;
if (lineWidth > canvasWidth) {
context.fillText(str.substring(lastSubStrIndex, i), 25, initHeight);//绘制截取部分
initHeight += 40;//40为字体的高度
lineWidth = 25;
lastSubStrIndex = i;
}
if (i == str.length - 1) {//绘制剩余部分，进行分行
context.fillText(str.substring(lastSubStrIndex, i + 1), 25, initHeight);
}
}
context.stroke();
}
var imageObj = new Image();
imageObj.onload = function () {
drawImage(this);
};
imageObj.src = "normal1.png";
// set this to false to maintain the canvas aspect ratio, or true otherwise
var stretch_to_fit = false;
function resize() {
// aspect ratio
var widthToHeight = canvas.width / canvas.height;
var newWidthToHeight = widthToHeight;
// cache the window dimensions (discount the border)
var newWidth = window.innerWidth - 2,
newHeight = window.innerHeight - 2;
if (stretch_to_fit) {
// overwrite the current canvas aspect ratio to fit the entire screen
widthToHeight = window.innerWidth / window.innerHeight;
} else {
newWidthToHeight = newWidth / newHeight;
}
// scale the canvas
if (newWidthToHeight > widthToHeight) {
newWidth = newHeight * widthToHeight;
canvas.height = newHeight;
canvas.width = newWidth;
} else {
newHeight = newWidth / widthToHeight;
canvas.width = newWidth;
canvas.height = newHeight;
}
};
// listen to resize events
window.addEventListener('resize', function () {
// resizes the canvas (this will clear the canvas because the width and height parameters are changed).
resize();
// so, we need to redraw the image back on canvas
drawImage(imageObj);
}, false);
// also resize the screen on orientation changes
window.addEventListener('orientationchange', function () {
resize();
drawImage(imageObj);
}, false);
// first resiz
resize();
//
window.onload = function () {
var img = convertCanvasToImage(canvas);
$('.box').append(img);
console.log(img);
}
//
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
//加载字体文件obj格式, cssValue为自定义字体的名字, url为自定义字体的文件路径
function loadFont(obj){
if (document.fonts && !this.checkFont(obj.cssValue)) {
let that = this;
let fontFamily = obj.cssValue;
console.log(obj);
let fontFace = new FontFace(obj.cssValue, `local('${obj.cssValue}'),url('${obj.url}') format('ttf'),url('${obj.url}')`);
fontFace.load().then(function (loadedFontFace) {
document.fonts.add(loadedFontFace);
that.canvasDemo.updateTextFontFamily(fontFamily);
});
}
}
//检测字体文件是否已加载
function checkFont(name){
let values = document.fonts.values();
let isHave = false;
let item = values.next();
while (!item.done && !isHave) {
let fontFace = item.value;
if (fontFace.family == name) {
isHave = true;
}
item = values.next();
}
return isHave;
}
//下载海报
function downloadimg() {
var img = $('.box').children('img').attr("src");
var alink = document.createElement("a");
alink.href = img;
alink.download = "2021牛年新年快乐.png";
alink.click();
}
</script>
</body>
</html>
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:360px;)" href="portrait-screen.css"/>
<style type="text/css">
/*媒体查询方法*/
@mediam screen and (max-width:960px) and (min-width:450px)
{
body{ background-color: #E5080B;}
}
@import url("phone.css") screen and (max-width:360px);
.ht, .wd {
width: 150px;
height: 10px;
background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50,#42c264); /*Safari */
background-image: -moz-linear-gradient(#4fec50,#42c264);/*Firefox*/
background-image: -o-linear-gradient(#4fec50,#42c264);/*Opera*/
background-image: -ms-linear-gradient(#4fec50,#42c264);/*IE*/
background-image: -chrome-linear-gradient(#4fec50,#42c264);/*Chrome*/
background-image: linear-gradient(#4fec50,#42c264);
}
WebGL 3D开发实战详解 第2版
IE 6
CSS
* html .ie6 { property: value; }
* html .ie6 { property: value; }
or
CSS
.ie6 { _property: value; }
.ie6 { _property: value; }
IE 7
CSS
*+html .ie7 { property: value; }
*+html .ie7 { property: value; }
or
CSS
*:first-child+html .ie7 { property: value; }
*:first-child+html .ie7 { property: value; }
IE 6 and 7
CSS
@media screen\9 {
.ie67 {
property: value;
}
}
@media screen\9 {
.ie67 {
property: value;
}
}
or
CSS
.ie67 { *property: value; }
.ie67 { *property: value; }
or
CSS
.ie67 { #property: value; }
.ie67 { #property: value; }
IE 6, 7 and 8
CSS
@media \0screen\,screen\9 {
.ie678 {
property: value;
}
}
@media \0screen\,screen\9 {
.ie678 {
property: value;
}
}
IE 8
CSS
html>/**/body .ie8 { property: value; }
html>/**/body .ie8 { property: value; }
or
CSS
@media \0screen {
.ie8 {
property: value;
}
}
@media \0screen {
.ie8 {
property: value;
}
}
IE 8 Standards Mode Only
CSS
.ie8 { property /*\**/: value\9 }
.ie8 { property /*\**/: value\9 }
IE 8,9 and 10
CSS
@media screen\0 {
.ie8910 {
property: value;
}
}
@media screen\0 {
.ie8910 {
property: value;
}
}
IE 9 only
CSS
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{
property: value;
}
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{
property: value;
}
}
IE 9 and above
CSS
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up {
property: value;
}
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up {
property: value;
}
}
IE 9 and 10
CSS
@media screen and (min-width:0\0) {
.ie910 {
property: value\9;
} /* backslash-9 removes ie11+ & old Safari 4 */
}
@media screen and (min-width:0\0) {
.ie910 {
property: value\9;
} /* backslash-9 removes ie11+ & old Safari 4 */
}
IE 10 only
CSS
_:-ms-lang(x), .ie10 { property: value\9; }
_:-ms-lang(x), .ie10 { property: value\9; }
IE 10 and above
CSS
_:-ms-lang(x), .ie10up { property: value; }
_:-ms-lang(x), .ie10up { property: value; }
or
CSS
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up {
property:value;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up {
property:value;
}
}
IE 11 (and above..)
CSS
_:-ms-fullscreen, :root .ie11up { property: value; }
_:-ms-fullscreen, :root .ie11up { property: value; }
Microsoft Edge
CSS
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
Firefox
Any version (Gecko)
CSS
@-moz-document url-prefix() {
.ff {
color: red;
}
}
@-moz-document url-prefix() {
.ff {
color: red;
}
}
Quantum Only (Stylo)
CSS
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
.ffStylo {
property: value;
}
}
}
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
.ffStylo {
property: value;
}
}
}
Legacy (pre-Stylo)
CSS
@-moz-document url-prefix() {
@supports not (animation: calc(0s)) {
/* Gecko */
.ffGecko {
property: value;
}
}
}
@-moz-document url-prefix() {
@supports not (animation: calc(0s)) {
/* Gecko */
.ffGecko {
property: value;
}
}
}
Webkit
Chrome & Safari (any version)
CSS
@media screen and (-webkit-min-device-pixel-ratio:0) {
property: value;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
property: value;
}
Chrome 29+
CSS
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}
}
Safari (7.1+)
CSS
_::-webkit-full-page-media, _:future, :root .safari_only {
property: value;
}
_::-webkit-full-page-media, _:future, :root .safari_only {
property: value;
}
Safari (from 6.1 to 10.0)
CSS
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@media {
.safari6 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@media {
.safari6 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
Safari (10.1+)
CSS
@media not all and (min-resolution:.001dpcm) {
@media {
.safari10 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
@media not all and (min-resolution:.001dpcm) {
@media {
.safari10 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
浙公网安备 33010602011771号