移动端页面适配

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

一、设计稿的布局设计

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

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

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

  因为安卓系统能够更改状态栏和导航栏的高度,这里能够取默认值为48px和100px。前端

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

  那么在全部屏幕大小上把重要内容显示彻底,就要注意市面上存在的小尺寸手机屏幕,如今绝大部分智能手机分辨率都在640*960px(iphone4分辨率)之上,因此只要把重要内容放在盲区之上便可,计算后的最安全高度为812(960-148=812)。jquery

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

二、相对单位rem的使用

   手机页面设计通常的大小是640,可是手机屏幕大小不肯定,那么怎样才能作出适应全部手机的手机页面呢?浏览器

  通常的解决方案有两种,rem布局和百分比布局,我更推荐用rem布局来制做手机页面安全

  rem布局的兼容性:iphone

  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>
相关文章
相关标签/搜索