<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <title>Viewport</title> <script> window.addEventListener("load", function (ev) { var orientationchange = function () { var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait'; document.body.innerHTML = orient + " : " + window.innerWidth + " / " + window.innerHeight + "<br />" + navigator.userAgent; }; window.addEventListener('orientationchange', orientationchange, false); orientationchange(); }, false); </script> </head> <body> 测试前提: width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; 测试方法: 用移动设备打开,非home screen模式。 横屏,记下landscape模式的width和height的值。 竖屏,记下portrait模式的width和height的值。 </body> </html>