web页面的适配问题

一个web页面既要在宽屏上显示，又要在窄屏上显示，既要在电脑上显示，又要在手机上显示，这个适配问题相当的麻烦。

其实解决电脑与手机的适配问题，一般有两个思路；一个是做判断，根据不同条件在css和js做相应的修改，一个是直接做两版，手机版和电脑版，手机版略精简。

1.宽屏与窄屏

由于现在宽屏电脑越来越频繁，所以如果再将内容宽度设为960就太不能满足要求了，所以将内容宽度设了两版分别为1190px和960px。

所有内容的外面包一个<div class="width-broad" id=“width-content”></div>这样，通过判断屏宽来修改class的值，达到修改样式的目的

js如下

<script type="text/javascript">

var bc=document.getElementById("banner-content");

if(parseInt(window.screen.availWidth) < 1190){
      
      bc.className="width_narrow";
}else{
    
      bc.className="width_broad";
}

</script>

css如下

/*控制宽度的类*/
.width_broad{width:1190px;margin:0px auto;}
.width_narrow{width:960px;margin:0px auto;}

然后，div里面的内容宽度最好用百分比，这样在内容宽度更改到960的时候，对应的内容会一并缩小。

在这样做的过程中，不知为什么小屏电脑的右侧会多出条空白条，因此屏幕下方就多了一个水平滚动条，本来应该没有这个水平滚动条的，所以我的解决办法是，在body的样式中增加一个属性如下：

body{overflow-x:hidden;}

这样电脑的适应问题基本解决了。

2.手机的适配问题

手机的屏宽一般分为

480*320     568*320   苹果

640*480

800*480

854*480

1280*720

1280*800

由于web页在手机上显示会做等比例缩小，所以在手机上显示的页面应该是宽为960的页面的等比例缩小。

这样，我在途中又遇到一个问题，就是当页面等比例缩小后页面的高度<手机屏幕的高度，这样手机屏幕的底部会出现一块空白，所以我的解决方法是通过判断是否是缩小后在手机上显示，如果是就在给它设置一套样式，使得他的页面高度>=手机屏幕的高度。

js如下：

<script type="text/javascript">

if(parseInt(window.screen.width) <=800){//边界点选为800是因为，屏幕宽度小于等于800的都是手机，都经过了等比例缩放
    
      $("#width-content passage").css("padding","100px");
      $("#width-content .title_name").css("font-size","40px");
      $("#width-content .detail").css("font-size","20px");
      $("#width-content .detail").css("line-height","40px");
}

</script>

这样，屏幕底部的空白就消失了。

通过以上的解决后，仍然存在一个问题，那就是在屏幕竖着放的时候内容中的文字图片等仍然看起来较吃力，解决办法就是可以将屏幕横过来，这样看起来刚刚好。

以上就是我解决适配问题的方法，如有更好的办法，请留言。。