移动端页面适配

前端开发中，尤其移动端手机屏幕大小各异，该如何解决页面适配的问题呢？下面从几点进行了总结。

1、设计稿的布局设计

　　我们在进行H5页面内容规划布局设计的时候，不能把重要的内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。

除去将浏览器全屏显示的情况，几乎所有的情况都会有顶部的状态栏和导航栏。

　　iphone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。

　　由于安卓系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px。

　　那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下）取这两个系统者的最大值为148，设计稿要尽量保证单页下面148px没有重要内容。

　　那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640*960px（iphone4分辨率）之上，所以只要把重要内容放在盲区之上即可，计算后的最安全高度为812（960-148=812）。

　　在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640*1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。

2、相对单位rem的使用

　　 手机页面设计一般的大小是640，但是手机屏幕大小不确定，那么怎样才能做出适应所有手机的手机页面呢？

　　一般的解决方案有两种，rem布局和百分比布局，我更推荐用rem布局来制作手机页面

　　rem布局的兼容性：

　　Mozilla Firefox 3.6+ ，Apple Safari 5+，Google Chrome ，IE9+和Opera11+

　　IE6-8还是别用rem了，不过在手机端，可以忽略ie内核这个问题。

　　rem的计算公式

　　例：html设置font-size：16px ，1rem=16px

　　最核心的代码就是这一段js运算了，根据页面的大小来控制基础rem的值，以下代码基于jquery：

　　

//jq
var windowW = $(window).width();
var ratio = windowW/640;
$("html").css("fontSize",100*ratio+"px");
$(window).on("resize",function(){
    var windowW = $(window).width();
    var ratio = windowW/640;
    $("html").css("fontSize",100*ratio+"px");
});

//js
function cal(){
    var windowW =document.documentElement.clientWidth||document.body.clientWidth;
    var ratio = windowW/640;
    if(windowW>640){
        document.getElementsByTagName("html")[0].style.fontSize="100px";
    }else{
        document.getElementsByTagName("html")[0].style.fontSize=100*ratio+"px";
    }
}
cal();
window.onresize = function(){
    cal();
}

 

ps：附上移动端的判断，可实现判断浏览器为移动端时，自动跳转到手机版页面链接

<script type="text/javascript">
 (function() { 
　　 var is_iPd = navigator.userAgent.match(/(iPad|iPod|iPhone)/i) != null;
 　　var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i) != null; 
　　if(is_mobi && window.location.search.indexOf("mv=fp")<0){
　　　　javascript:window.location.href="/wap";
 　　} 
})

</script>