移动端页面开发问题总结

    时间过的飞快，转眼间作移动端已经将近两个月时间了，在这两个月中作了不少个页面，有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属性来解决。

 

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