网页上的图片在手机上浏览时会产生大小不满屏的问题，当图片宽度小于手机屏幕宽度时没所谓，当图片宽度很大时，网页就会很难看。下面介绍几个方法，当网页加载完成后（包括图片），让大图片自适应屏幕大小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
varwinHeight;
varwinWidth;
                       
if(window.innerWidth)
    winWidth = window.innerWidth;
elseif((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
// 获取窗口高度
if(window.innerHeight)
    winHeight = window.innerHeight;
elseif((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
    // 通过深入 Document 内部对 body 进行检测，获取窗口大小
if(document.documentElement && document.documentElement.clientHeight  && document.documentElement.clientWidth){
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
}
                    
window.onload =function(){
    // 先获取想要改变的所有图片对象（集合）
    varobj=document.getElementById("content").getElementsByTagName("img");
    for(vari=0;i<obj.length;i++){
        varwidth = obj[i].width;
        // 判断图片宽度是否大于屏幕宽度
       if(width > winWidth){
           obj[i].width = winWidth;
       }
    }
}
</script>

  注意：window.onload 是在网页所有资源加载完毕后运行，比 jquery 的 $(function(){}); 运行要延后，也就在运行时间比它晚，所以很适合做图片大小自适应屏幕。

版权声明：若无特殊注明，本文皆为( yueshuo )原创，转载请保留文章出处。