本文将带你了解WEBAPP开发教程[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应，希望本文对大家学WEBAPP有所帮助。

前言
   
    本文中所指Mobile WebApp是指运行在Mobile WebKit浏览器上的WebApp。本篇文章讲解如何像传统PC网页开发一样，使用定宽布局开发WebApp，并让WebApp适应多终端设备：
    不使用Mobile UI框架不使用响应式布局适配多终端，适配WebApp布局宽度为终端设备分辨率宽度一套CSS代码，一套布局方案可以实现复杂的UI界面支持iPhone、Android
     
   
   
    目前主流的WebApp UI开发框架有jQuery Mobile、Sencha Touch等，这些框架在处理不同设备分辨率的适配时，采用响应式布局和基于百分比的形式显示UI组件，UI可以根据设备的不同尺寸进行呈现。
   
    虽然jQuery Mobile等框架很强大，但是在开发UI复杂的界面时，还是力不从心：百分比设置宽度不能适应复杂的布局要求。这时就需要固定宽度布局的开发方式了，但是网上的资料都在讲述“定宽网页设计，并不适用于多终端兼容的情况”，jQuery Mobile等框架也没有提供良好的解决方案，固定宽度布局在移动设备上真的不可行吗？
   
   
     
   
    一、iPhone、Android自带浏览器如何显示定宽布局页面
   
    viewport是网页可绘制的区域。虽然viewport可视面积和屏幕尺寸相匹配，但viewport有其自己的尺寸，确定网页的像素数量。也就是说，网页的像素数量超过定义的viewport尺寸，而不是设备屏幕尺寸的屏幕面积。例如，虽然设备屏幕上可能是480像素宽，viewport是800像素宽，这时网页设计定宽800像素的页面可以正好完全显示在屏幕上。
   
    例如下面的代码片断，为HTML文档指定viewport属性。viewport的宽度为匹配设备屏幕的宽度，且禁用缩放。 
   
   
    
   
   
   
   
      iPhone 和 Android 平台上，WebKit 内核的浏览器使用 980 像素宽的视见区或逻辑尺寸，相当于viewport的width=980px。当页面加载后，内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放得非常小，甚至不可读。下面使用一个简单的定宽布局页面，在部分手机里使用自带浏览器访问，显示情况如下：
   
   
   
     
   
     
   
     
   
   
   
     
   
   
   
    可以看到，部分手机中页面会缩得很小，另外的手机中，页面被放大，出现横向滚动条。无论哪种形式，都影响用户的使用体验。 
   
     
   
    二、如何让定宽布局的WebApp在iPhone、Android自带浏览器中，自适配终端，完美显示 
   
    iPhone3GS及以上设备的Safari支持修改viewport的width来改变页面的缩放情况，你可以将width指定为页面设计的宽度，如此一来，你的页面正好充满viewport并全屏显示，而不会缩放。如当页面设计宽度为480px时，可以设置viewport的width=480px：
   
   
   
   
     
   
    遗憾的是Android4.0以下的手机系统自带浏览器中，不支持设置viewport的width，没关系，Android自带浏览器支持设置另一参数target-densitydpi来达成目的。经过测试，不同分辨率的手机上，如下值可以让定宽页面设计的网页正好填充全屏宽度，而没有滚动条：
   
    手机
   
   
    分辨率宽度
   
   
    布局宽度480px
   
   
    布局宽度640px
   
   
    devicePixelRatio
   
   
    HTC Wildfire(G8)
   
   
    240px
   
   
    240dpi
   
   
    320dpi
   
   
    0.75
   
   
    HTC Hero(G3)
   
   
    320px
   
   
    240dpi
   
   
    320dpi
   
   
    1
   
   
    GT-I9100G
   
   
    480px
   
   
    240dpi
   
   
    320dpi
   
   
    1.5
   
   
    Nexus S
   
   
    480px
   
   
    240dpi
   
   
    320dpi
   
   
    1.5
   
   
    MT-870
   
   
    540px
   
   
    213dpi
   
   
    284dpi
   
   
    1.5
   
   
    MX032
   
   
    640px
   
   
    240dpi
   
   
    320dpi
   
   
    1.5
   
   
    note2
   
   
    720px
   
   
    213dpi
   
   
    284dpi
   
   
    2
   
   
    I9308
   
   
    720px
   
   
    213dpi
   
   
    284dpi
   
   
    2
   
   
    GT-N7108
   
   
    720px
   
   
    213dpi
   
   
    284dpi
   
   
    2
   
   
    GT-I9228
   
   
    800px
   
   
    192dpi
   
   
    256dpi
   
   
    2
   
   
    从这一庹数据中，会不会有一个放之众Android机而皆准的公式呢？
   
     
   
    各位愿意偷懒的不用自己推了，就死我的脑细胞就可以了，就是下方这一条了：
   
    target-densitydpi =   UI-width / device-width * window.devicePixelRatio   * 160;
      //UI-width
     ：WebApp布局宽度  //device-width   ：屏幕分辨率宽度
   
   
    其实在上面的一庹数据中，note2和GT-I9228的target-densitydpi 是在得出公式计算出来，并验证了的。
   
 
   
    将Android的处理方式应用到刚才的页面，在上图中的手机中访问以作测试：
   
   
   
     
   
   
   
     
   
   
   
    观察上图可见，在所测试的手机上，测试页面均自适配到手机屏幕的分辨率，全屏显示且无横向滚动条。
   
     
   
    三、固定宽度布局WebApp多终端自适配方法总结
   
    1、iPhone上，指定viewport 的width等于页面设计宽度：
   
   
   
   
    2、Android上，根据公式计算得出target-densitydpi的值，指定到viewport：
   
    get-target-densitydpi   = UI-width / device-width * window.devicePixelRatio * 160;
   
    //UI-width ：WebApp布局宽度
    //device-width ：屏幕分辨率宽度
   
   
   
   
   
     

         

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！