mopagunda

    时间过的飞快,转眼间做移动端已经将近两个月时间了,在这两个月中做了很多个页面,有js,jq,还有页面适配等相关内容,虽然一切看上去都很正常,可是总感觉适配性不是特别好,这就导致在后续要做很多补救工作,甚至有的时候要靠牺牲页面性能(直接用图片)或细微调整设计稿来实现,长路漫漫啊~接下来就将工作中遇到的一些问题总结下来,以及对类似腾讯,京东,淘宝的页面进行简要分析。

   1.自适应

   在手机端页头我们一般要加两行代码:

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta content="telephone=no,email=no" name="format-detection">(禁止浏览器将数字识别为电话号码;)    

     这是网上主流的做法,设定viewport视口宽度等于设备的宽度,并且初始缩放比例为1.0,同时禁止用户缩放页面。比如一般手机的device-width都为320,即视口宽度为320,假如页面中某元素的尺寸直接用像素设定,并且超过320,那么将不能够在窗口中完全显示,因此这时候我们将宽度,高度改为百分比,字体也用相对单位em或rem,这样也能更好的适应屏幕,可是问题来了,如果为图片,这问题很简单,我们可以简单粗暴的设定图片的最大宽度或最小宽度,这样能保证图片再整个屏幕中的显示效果一致。可是如果不是图片的话,假如我们给外层div宽度设为90%,div里有一行大字,大概占div宽度的95%,字体大小用em(假设浏览器默认字体大小为1em=16px),不同设备宽度的95%是不同的,这就意味着有的屏幕下字体会换行。。。当然,如果div宽度不是很大的话,我们也可以将宽度设为XXem,不过貌似这样还要不停的计算。当然我做移动端时间不长,如果理解有误,请及时告诉我,以免我误入歧途。。。

   <meta id="screeMeta" name="viewport" content="width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.5">

   这是我们现在的做法,通过js来控制缩放。

<script type="text/javascript">
 
var sW=$(window).width();
//alert(sW);
if(sW>=640&&sW<720){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.5");
}else if(sW>=720&&sW<750){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.56");
}else if((sW>=750&&sW<800)){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.58");
}else if(sW>=800&&sW<1000){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.65");
}
</script>

     在制作的时候宽度,字号等都可以按照设计来直接进行设置,不过会有很多屏幕像素是大于640的,这就会在页面中出现各种各样的小缝隙,然后我们在逐个解决。。

     下面看看腾讯,京东,淘宝都是怎么做的~

这是京东的页面设置,viewport设为设备尺寸,在页面中整个页面(除导航外),设定了一个外围容器viewport;css是这样设置的:

min-width:300px;max-width:640px;margin:0px auto;padding:0 5px;页面中高度,宽度百分比和实际像素都有,字号用的是px;

 

淘宝页头设置为<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

页面很多元素的宽度,高度设置用了rem单位设置。

 

淘宝页头设置为<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

页面很多元素的宽度,高度设置用百分比,字体用em,天猫与腾讯类似,不过字号为px。

看来巧妙的布局能解决很多适应问题

 

2.关于overflow兼容性问题

之前要做一个页面,我们重新设计了滚动条的样式,与传统滚动条形式完全不同,由于时间关系,直接找了一个插件,在前面的博文中有过介绍,通过简单的设置后,在iphone中表现完美,

可是放到Android中,问题就来了,样式没有出来,而且滑动时会出现bug,(div设置overflow:auto)。查了很多资料也没找到解决办法,最后只能是在页面加载最开始后判断为ios或andriod,

然后只有ios执行新滚动条样式,andriod用默认样式~(判断ios或andriod,通过js的navigator来进行判断)

3.关于动态生成元素的绑定事件

我们知道,对于动态生成的元素一般用on方法绑定事件,比如click,我们这样写document.on("click","#xx",function(){}),bug来了,再iphone6上点击无效,百思不得其解,最后的解决办法竟然是。。。

给当前元素添加css属性-cursor:pointer,原因不详,不过确实是可以解决的~

4.iphone6弹出虚拟键盘

需求是这样的,点击输入框,弹出虚拟键盘,然后输入完成后弹窗(这时候其实虚拟键盘应该是滑出的过程),弹窗在整个页面中居中,具体通过js计算,这时候发现iphone6仅仅是iphone6的弹窗外置会跑出窗口外~猜想可能是高度计算问题,于是alert了计算所需的高度,发现当alert后确定,弹窗位置正确,那就应该是事件执行时间问题了,我将弹窗弹出延迟100ms,即setTimeout(function(){},100),问题解决。

5.关于元素均匀分布,可以借助box,flex属性来解决。

 

好了,先写到这里,有想到的问题会陆续补充~

 

 

    

分类:

技术点:

相关文章: