viewport定宽方式布局webapp切图

- （扫一扫加微信好友）
- （抖音扫一扫，立即关注我）
- 拨打电话：027-81777732

2015年7月19日

viewport定宽方式布局webapp切图

切图网在为客户做webapp制作的时候，通常都是固定宽度的，比如常见的webapp宽度的设计是640,750等，当我们拿到一个设计稿是 640宽的时候，那么我们切出来的网页也是固定 640宽的，跟大家所认知的 100%自适应布局、流式布局等不同，所以经常会有客户会提出为什么不是100%宽度的呢，这个是不是会自适应不同宽度的手机下会有问题？答案是不会的，在任何手机屏幕下，会以640宽度去铺满这个屏幕，所以是自适应的。

固定宽度可以让网页布局更加好看，在pc上预览更加贴近设计稿原稿，而且对手机下访问没有任何影响，反而更加还原了设计稿的设计。所以切图网www.qietu.com更建议定宽方式来布局，如果大家有不同意见可以一起交流。下面介绍关于viewport定宽方式webapp切图的方法。

————————————————————————————————-

以下摘自互联网
一般来说，我们实现布局自适应可以有以下几种方式：

使用流动布局（fluid grid）
根据屏幕大小选择加载不同的CSS
使用 CSS 的@media规则

这里介绍的是如何让定宽网页在 WebApp 下（或者手机浏览器）实现自适应。例如，我们设计了一套宽度为 640px 的小页面，主要是用于手机查看，但是手机屏幕分辨率实在太多了，要适应每台手机，应该怎么办呢？

首先，我们在 head 中加入：

<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>

这里表示 viewport 的宽度为匹配设备屏幕的宽度，且禁用缩放。涉及到两个概念：

viewport 元素
devicePixelRatio：设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

由于 iphone 手机和 android 4.0 以上的手机支持修改 viewport 的 width 来改变页面的缩放情况，因此我们可以将 width 指定为页面设计的宽度，如此一来，你的页面正好充满 viewport 并全屏显示，而不会缩放。例如：

<meta name="viewport" content="width=640px, user-scalable=no">

但是对于 android 4.0 以下的手机，不支持设置 viewport 的 width，但是我们可以设置 Android 的另一参数target-densitydpi，从而达到相同的目的，计算 target-densitydpi 的公式如下：

target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
  //UI-width ：WebApp布局宽度
  //device-width ：屏幕分辨率宽度

于是，最终解决方案如下：

<meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no">

$(function () {
    var DEFAULT_WIDTH = 640, // 页面的默认宽度
        ua = navigator.userAgent.toLowerCase(), // 根据 user agent 的信息获取浏览器信息
        deviceWidth = window.screen.width, // 设备的宽度
        devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和设备独立像素的比例，默认为1
        targetDensitydpi;

    // Android4.0以下手机不支持viewport的width，需要设置target-densitydpi
    if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android")+8)) < 4) {
        targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160;
        $('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi +
                ', width=device-width, user-scalable=no');
    }

    // TODO: 其他手机需要特殊处理的在下面
});

存在的问题：