2 t0l9y8 t0l9y8 于 2016.03.28 11:56 提问

求大神:html 使用zoom缩小后页面出现空白部分

一、使用zoom缩小html的body节点,目的是自适应屏幕分辨率,代码如下
1、css:
body {
margin: 0;
padding: 0;
height: 100%;
font: normal 15px "Microsoft YaHei";
color: #0C0C0C;
font-size: 14px;
line-height: 20px;
}

html {
height: 100%;
margin: 0;
padding: 0;
}
2、html:



<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>XXXXX</title>
        ......
        <script>
        var screen_width = window.screen.width;
        var zoom_value = Math.floor((screen_width*100)/1920);
        document.write("<body style=\"zoom: " + zoom_value + "%\">");
        </script>
    </head>
    <body>
    ......
    </body>
</html>


二、问题:在不同分辨率下,IE浏览器最大化情况下确实达到了整屏显示所有内容的目的,但是浏览器出现了上下和左右滚动条,滚动到底后,在浏览器下方和右方出现大段空白;
试过“overflow:hidden”的方法,但是这样一来缩小浏览器后就因为无滚动条无法显示所有内容了;
请问无论浏览器大小,只显示缩小后的内容,而不显示空白的部分。

1个回答

showbo
showbo   Ds   Rxr 2016.03.28 13:59
已采纳

自适应用zoom楼主你有是有才了。。用css media query,不同分辨率用不同的样式。ie8-这种老浏览器就不需要兼容了

http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

t0l9y8
t0l9y8 http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201404/256639.shtml
一年多之前 回复
t0l9y8
t0l9y8 主要是版本赶时间,而且现有css混杂了绝对和相对的宽高,为每一个分辨率重新写css实在赶不上时间,从下面这个地址上有介绍用zoom做自适应,但是好早的帖子,也没有说怎么处理滚动条问题。
一年多之前 回复
t0l9y8
t0l9y8 主要是版本赶时间,而且现有css混杂了绝对和相对的宽高,为每一个分辨率重新写css实在赶不上时间,从下面这个地址上有介绍用zoom做自适应,但是好早的帖子,也没有说怎么处理滚动条问题。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!