一个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>
这样,屏幕底部的空白就消失了。
通过以上的解决后,仍然存在一个问题,那就是在屏幕竖着放的时候内容中的文字图片等仍然看起来较吃力,解决办法就是可以将屏幕横过来,这样看起来刚刚好。
以上就是我解决适配问题的方法,如有更好的办法,请留言。。