测试一

测试的物料:

<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中关于宽高的总结的更多相关文章

  1. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  2. canvas基础入门(一)canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  3. iOS硬解码获取宽高

    1: CVPixelBufferGetWidth(_:The pixel buffer whose width you want to obtain) 获取解码后图像宽度 CVPixelBufferG ...

  4. js中各种宽高

    各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY ...

  5. DOM中获取宽高、位置总结

    原生JS 一.文档.窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen. ...

  6. 第76天:jQuery中的宽高

    Window对象和document对象的区别 1.window对象表示浏览器中打开的窗口 2.window对象可以省略,比如alert()也可以写成window.alert() Document对象是 ...

  7. js/jQuery中的宽高

    一.和window有关的宽高 window.innerWidth:浏览器窗口宽度 window.innerHeight:浏览器窗口高度(不包括导航,工具栏等的高度) window.outerWidth ...

  8. jquery操作html中图片宽高自适应

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...

  9. IE6中奇数宽高的BUG

    一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div ...

随机推荐

  1. 学习PYTHON之路, DAY 2 - PYTHON 基础 2(基础数据类型)

    一 字符串格式化输出 name = 'nikita' age = 18 print ("I'am %s, age is %d") % (name, age) PS: 字符串是 %s ...

  2. JSP显示不完全问题

    这个问题出现之后其实有点让我手足无措,因为根本不知道原因出在哪儿. 因为出现这个问题之后修改过一次代码,所以我以为是因为这次修改出现的问题. 但细想之下,这次的修改根本没有涉及到任何有关这方面的东西. ...

  3. log4net.NoSql +ElasticSearch 实现日志记录

    前言: 前两天在查找如何扩展log4net的日志格式时找到一个开源项目Log4net.NoSql,它通过扩展Appender实现了把日志输出到ElasticSearch里面.顺藤摸瓜,发现涉及的项目还 ...

  4. centos 非可视化查看已安装的redis

    1. 2.

  5. C语言文法的理解

    <程序> ->  <外部声明> |  <程序>  <外部声明> <外部声明>  ->   <函数定义>  |  &l ...

  6. Java 获取网络重定向文件的真实URL

    其实Java 使用HttpURLConnection下载的的时候,会自动下载重定向后的文件,但是我们无法获知目标文件的真实文件名,文件类型,用下面的方法可以得到真实的URL,下面是一个YOUKU视频的 ...

  7. redhat6.4上安装mysql

    1.挂载操作系统介质 [root@server- ~]# mkdir -p /media/dvd [root@server- ~]# -20130130.0-Server-x86_64-DVD1.is ...

  8. 黑马程序员——OC语言 类和对象

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)类 1)类的声明 代码编写 ①定义一个Car类,拥有2个属性:轮子数 ...

  9. Hadoop数据类型介绍

    我们知道hadoop是由Java 编程写的.因此我们使用Java开发环境来操作HDFS,编写mapreduce也是很自然的事情.但是这里面hadoop却对Java数据类型进行了包装,那么hadoop的 ...

  10. 三部曲一(数据结构)-1011-Sorting It All Out

    每次加入一个关系都要进行拓扑排序,不过在排序过程中需要判断是否出现多个入度为0的点,如果出现了就说明不能确定大小关系.不论出不出现多个入度为0的点拓扑排序都要进行到最后来判断是否出现环,因为一旦出现环 ...