关于屏幕适配问题几种思路与方式

相关参数以及测试结果

 

1、

document.body.clientWidth：网页可见区域(body 内容)宽

document.body.clientHeight：网页可见区域(body 内容)高

重点理解clientHeight

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1 ,maximum-scale=1, user-scalable=no">
		<!-- 苹果 -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 苹果手机自动将号码变为 a 链接格式 -->
		<meta name="format-detection" content="telephone=no" />

		<!-- <link rel="stylesheet" href=""> -->


	</head>
	<body>

	</body>
</html>

此时输出的clientHeight结果为 0

但是如果给内容添加一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="initial-scale=1 ,maximum-scale=1, user-scalable=no">
        <!-- 苹果 -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!-- 苹果手机自动将号码变为 a 链接格式 -->
        <meta name="format-detection" content="telephone=no" />

        <!-- <link rel="stylesheet" href=""> -->


    </head>
    <body>
        <div style="height:500px;width:100%;background-color:green;"></div>




    </body>
</html>

此时输出的clientHeight结果为 500px;

2、

document.body.offsetWidth：网页可见区域(body 内容)宽(包括边线和滚动条的宽)

document.body.offsetHeight：网页可见区域(body 内容)高(包括边线的宽)

经过测试与第一种结果相同：测试环境为谷歌和狐火浏览器

 

3、

 

posted @ 2015-12-07 20:35  小屁孩988  阅读(251)  评论(0)  编辑  收藏  举报