標籤：
測試一
測試的物料：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.5 user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SMAdUnit</title>
</head>
<body style="margin:0px auto; padding:0; overflow:hidden; background-color:transparent;"><p>
<a href="http://appsrv1.madserving.com/cli2/lgkrp9de65881hl5rl30066fjiv46q6881bqupb25bee2ec..MzY5MDQxMg.c46ab76d2859.ODY2Mjc4MDE..ODY2Mjc4MDEzNjkwNDEy...-1-1hlx5d/napi1.0.0000/90042385"><img src="http://ws-cdn.tangmobile.com/2009/smartmad2/20/52/25bee2ec.jpg" /></a></p>
</body>
<script type="text/javascript">
function loadimagefinish(){
console.log(‘document.body.clientWidth ‘ + document.body.clientWidth);
console.log(‘document.body.clientHeight ‘ + document.body.clientHeight);
console.log(‘window.screen.height ‘ + window.screen.height);
console.log(‘window.screen.width ‘ + window.screen.width);
console.log(‘window.screen.availHeight ‘ + window.screen.availHeight);
console.log(‘window.screen.availWidth ‘ + window.screen.availWidth);
console.log(‘window.innerWidth ‘ + window.innerWidth);
console.log(‘window.innerHeight ‘ + window.innerHeight);
console.log(‘window.outerWidth ‘ + window.outerWidth);
console.log(‘window.outerHeight ‘ + window.outerHeight);
console.log(‘window.screenLeft ‘ + window.screenLeft);
console.log(‘window.screenTop ‘ + window.screenTop);
console.log(‘window.screenY ‘ + window.screenY);
console.log(‘window.screenX ‘ + window.screenX);
}
var timerid = window.setInterval(loadimagefinish,5000);
</script>
</html>
webview 設定為300*280
測試裝置 iPad
這是使用safair調試：
測試二
測試的物料：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SMAdUnit</title>
</head>
<body style="margin:0px auto; padding:0; overflow:hidden; background-color:transparent;"><p>
<a href="http://appsrv1.madserving.com/cli2/lgkrp9de65881hl5rl30066fjiv46q6881bqupb25bee2ec..MzY5MDQxMg.c46ab76d2859.ODY2Mjc4MDE..ODY2Mjc4MDEzNjkwNDEy...-1-1hlx5d/napi1.0.0000/90042385"><img src="http://ws-cdn.tangmobile.com/2009/smartmad2/20/52/25bee2ec.jpg" /></a></p>
</body>
<script type="text/javascript">
function loadimagefinish(){
console.log(‘document.body.clientWidth ‘ + document.body.clientWidth);
console.log(‘document.body.clientHeight ‘ + document.body.clientHeight);
console.log(‘window.screen.height ‘ + window.screen.height);
console.log(‘window.screen.width ‘ + window.screen.width);
console.log(‘window.screen.availHeight ‘ + window.screen.availHeight);
console.log(‘window.screen.availWidth ‘ + window.screen.availWidth);
console.log(‘window.innerWidth ‘ + window.innerWidth);
console.log(‘window.innerHeight ‘ + window.innerHeight);
console.log(‘window.outerWidth ‘ + window.outerWidth);
console.log(‘window.outerHeight ‘ + window.outerHeight);
console.log(‘window.screenLeft ‘ + window.screenLeft);
console.log(‘window.screenTop ‘ + window.screenTop);
console.log(‘window.screenY ‘ + window.screenY);
console.log(‘window.screenX ‘ + window.screenX);
}
var timerid = window.setInterval(loadimagefinish,5000);
</script>
</html>
webview 設定為300*280
測試裝置 iPad
這是使用safair調試：
比較兩個物料發現
物料一
<meta name="viewport" content="initial-scale=0.5 user-scalable=no" />
物料二
<meta name="viewport" content="width=device-width, user-scalable=no">
個人認為：由於設定了viewport導致物料二中document.body.clientWidth 返回寬度是裝置的寬度，document.body.clientHeight 高度按照300＊280的比例等比例放大了 280*（768/300）＝716.8（約等於717）
擷取webview的實際寬度可以考慮使用window.innerWidth,window.innnerHeight.(資料現實這兩個返回的值不包括邊框寬度)
ios webview中關於寬高的總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
