Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added extra device-pixel-ratio examples

  • Loading branch information...
commit 97ffdaa0172c8073b44152948c8de5b82dbe7e4e 1 parent c933123
@andreasbovens authored
View
4 index.html
@@ -29,7 +29,9 @@
<li><a href="meta-widthdevicewidth-initialscale1-div600.html">&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; + &lt;div style="width: 600px"&gt;</a></li>
<h2>DPI-specific settings</h2>
<li><a href="meta-widthdevicewidth-withimage.html">&lt;meta name="viewport" content="width=device-width"&gt; with hi-res and lo-res images</a></li>
- <li><a href="meta-widthdevicewidth-devicepixelratio.html">&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query</a></li>
+ <li><a href="meta-widthdevicewidth-devicepixelratio15.html">&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query (1.5)</a></li>
+ <li><a href="meta-widthdevicewidth-devicepixelratio2.html">&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query (2)</a></li>
+ <li><a href="meta-widthdevicewidth-devicepixelratio225.html">&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query (2.25)</a></li>
<li><a href="meta-widthdevicewidth-targetdensitydpidevicedpi.html">&lt;meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"&gt;</a></li>
<h2>@viewport</h2>
<ul>
View
48 meta-widthdevicewidth-devicepixelratio15.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query (1.5)</title>
+<meta name="viewport" content="width=device-width">
+<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
+<link href="style.css" rel="stylesheet" type="text/css">
+<style>
+@media (-o-min-device-pixel-ratio: 3/2),
+ (-webkit-min-device-pixel-ratio: 1.5),
+ (min--moz-device-pixel-ratio: 1.5),
+ (min-resolution: 1.5dppx) {
+ body {background-size: 1000px;}
+}
+</style>
+<script src="report.js"></script>
+<script>
+function init() {
+ var article = document.getElementById('article');
+ var top = document.getElementById('top');
+ top.addEventListener('click', function () {
+ article.classList.toggle('fold');
+ }, false);
+}
+window.addEventListener('load', init, false);
+</script>
+</head>
+<body>
+<article id="article">
+<h1 id="top">viewport setting</h1>
+<pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
++
+@media (-o-min-device-pixel-ratio: 3/2),
+ (-webkit-min-device-pixel-ratio: 1.5),
+ (min--moz-device-pixel-ratio: 1.5),
+ (min-resolution: 1.5dppx) {
+ body {background-size: 1000px;}
+}
+</code></pre>
+<h1>reported values</h1>
+<output></output>
+<h1>lorem ipsum</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non elit non enim consectetur iaculis ut ac mi. Sed adipiscing nulla id ipsum placerat congue. Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
+<p>Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
+</article>
+</body>
+</html>
View
48 meta-widthdevicewidth-devicepixelratio2.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query (2)</title>
+<meta name="viewport" content="width=device-width">
+<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
+<link href="style.css" rel="stylesheet" type="text/css">
+<style>
+@media (-o-min-device-pixel-ratio: 2/1),
+ (-webkit-min-device-pixel-ratio: 2),
+ (min--moz-device-pixel-ratio: 2),
+ (min-resolution: 2dppx) {
+ body {background-size: 1000px;}
+}
+</style>
+<script src="report.js"></script>
+<script>
+function init() {
+ var article = document.getElementById('article');
+ var top = document.getElementById('top');
+ top.addEventListener('click', function () {
+ article.classList.toggle('fold');
+ }, false);
+}
+window.addEventListener('load', init, false);
+</script>
+</head>
+<body>
+<article id="article">
+<h1 id="top">viewport setting</h1>
+<pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
++
+@media (-o-min-device-pixel-ratio: 2/1),
+ (-webkit-min-device-pixel-ratio: 2),
+ (min--moz-device-pixel-ratio: 2),
+ (min-resolution: 2dppx) {
+ body {background-size: 1000px;}
+}
+</code></pre>
+<h1>reported values</h1>
+<output></output>
+<h1>lorem ipsum</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non elit non enim consectetur iaculis ut ac mi. Sed adipiscing nulla id ipsum placerat congue. Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
+<p>Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
+</article>
+</body>
+</html>
View
48 meta-widthdevicewidth-devicepixelratio225.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query (2.25)</title>
+<meta name="viewport" content="width=device-width">
+<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
+<link href="style.css" rel="stylesheet" type="text/css">
+<style>
+@media (-o-min-device-pixel-ratio: 9/4),
+ (-webkit-min-device-pixel-ratio: 2.25),
+ (min--moz-device-pixel-ratio: 2.25),
+ (min-resolution: 2.25dppx) {
+ body {background-size: 1000px;}
+}
+</style>
+<script src="report.js"></script>
+<script>
+function init() {
+ var article = document.getElementById('article');
+ var top = document.getElementById('top');
+ top.addEventListener('click', function () {
+ article.classList.toggle('fold');
+ }, false);
+}
+window.addEventListener('load', init, false);
+</script>
+</head>
+<body>
+<article id="article">
+<h1 id="top">viewport setting</h1>
+<pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
++
+@media (-o-min-device-pixel-ratio: 9/4),
+ (-webkit-min-device-pixel-ratio: 2.25),
+ (min--moz-device-pixel-ratio: 2.25),
+ (min-resolution: 2.25dppx) {
+ body {background-size: 1000px;}
+}
+</code></pre>
+<h1>reported values</h1>
+<output></output>
+<h1>lorem ipsum</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non elit non enim consectetur iaculis ut ac mi. Sed adipiscing nulla id ipsum placerat congue. Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
+<p>Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
+</article>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.