html页面不同分辨率电脑屏幕展示内容高度适配问题

背景

之前写过一个系统是在自己的电脑上调的,页面展示是合适的,但到别人电脑上是很小的一点,看着不是很美观,所以想适配不同的屏幕。

比如在我的电脑上是这样:
《html页面不同分辨率电脑屏幕展示内容高度适配问题》
在别人电脑上可能是这样(屏幕下方有一大块空白页面):
《html页面不同分辨率电脑屏幕展示内容高度适配问题》
也可能是这样(右侧出现滚动条):
《html页面不同分辨率电脑屏幕展示内容高度适配问题》
说明:造成这种情况绝对不是浏览器缩放的原因,都是100%。

那如何让所有人电脑上展示的页面都能占满整个屏幕,不出现空白,也不会有滚动条?

解决办法

通过screen.width获得不同分辨率电脑屏幕的宽度,根据这个宽度调节不同分辨率页面内容的高度,就可以做到适配

var screenw=screen.width;
switch (screenw){ 
    case 1920:
        $('#xmlContent').css("height",620);
        break;
    case 1536:
        $("#xmlContent").css("height",486);
        break;
    case 1280:
        $("#xmlContent").css("height",445);
        break;

}
    原文作者:坡上人_yyh
    原文地址: https://blog.csdn.net/qq_38303546/article/details/105726518
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞