| <html> |
| <head> |
| <style> |
| body { |
| margin: 0; |
| min-height: 1000px; |
| } |
| #test { |
| width: 100px; |
| height: 100px; |
| } |
| @media all and (device-width:700px) |
| { |
| #test { width: 300px; } |
| } |
| @media all and (max-device-width:699px) |
| { |
| #test { width: 200px; } |
| } |
| @media all and (min-device-width:701px) |
| { |
| #test { width: 400px; } |
| } |
| @media all and (device-height:500px) |
| { |
| #test { height: 300px; } |
| } |
| @media all and (max-device-height:499px) |
| { |
| #test { height: 200px; } |
| } |
| @media all and (min-device-height:501px) |
| { |
| #test { height: 400px; } |
| } |
| #pointer { |
| width: 10px; |
| height: 10px; |
| } |
| @media all and (pointer: coarse) |
| { |
| #pointer { height: 20px; } |
| } |
| @media all and (hover: none) |
| { |
| #pointer { width: 20px; } |
| } |
| </style> |
| |
| <script> |
| function dumpSize(id) |
| { |
| var div = document.querySelector("#" + id); |
| return div.offsetWidth + "x" + div.offsetHeight; |
| } |
| </script> |
| </head> |
| <body> |
| <div id="test"></div> |
| <div id="pointer"></div> |
| </body> |
| </html> |
