| <!DOCTYPE html> |
| <html> |
| <head> |
| <script type='text/javascript'> |
| // Demonstrates how media query can be used to get the value of the |
| // window resolution, width, and height. |
| |
| function log_info(message) { |
| console.log(message); |
| document.getElementById('info').innerHTML += message + '.\n'; |
| } |
| function log_error(message) { |
| console.log('Error: ' + message); |
| document.getElementById('error').innerHTML += message + '.\n'; |
| } |
| |
| function search(low, high, query, units) { |
| var precision = 1/32; |
| while (low < high - precision) { |
| var mid = Math.floor((low + high) / 2 / precision) * precision; |
| query_str = '(max-' + query + ':' + mid + units + ')' |
| if (window.matchMedia(query_str).matches) { |
| // The window value is less than or equal to result. |
| high = mid; |
| } else { |
| // The window value is greater than result. |
| low = mid; |
| } |
| } |
| return high; |
| } |
| |
| function PrintWindowSize() { |
| var width = search(0, 16000, 'width', 'px'); |
| var height = search(0, 16000, 'height', 'px'); |
| log_info('media size: ' + width + 'x' + height); |
| if (Math.abs(width - window.innerWidth) >= 1) { |
| log_error('width does not match window.innerWidth'); |
| } |
| if (Math.abs(height - window.innerHeight) >= 1) { |
| log_error('height does not match window.innerHeight'); |
| } |
| } |
| |
| function PrintDpi() { |
| var dpi = search(0, 16000, 'resolution', 'dpi'); |
| log_info('resolution dpi: ' + dpi + |
| ', window.devicePixelRatio: ' + window.devicePixelRatio); |
| if (Math.abs(dpi - 96 * window.devicePixelRatio) > 1) { |
| log_error('resolution does not match devicePixelRatio'); |
| } |
| } |
| |
| |
| function intervalCallback() { |
| PrintDpi(); |
| PrintWindowSize(); |
| } |
| |
| window.setInterval(intervalCallback, 500); |
| </script> |
| </head> |
| |
| <body> |
| <span id='error' style='white-space: pre; background-color:#FF0000'></span> |
| <span id='info' style='white-space: pre; background-color:#00FF00'></span> |
| </body> |
| </html> |
