引潮网络,网站logo

专业的网站建设团队,十年建站经验,引潮网络致力于平顶山网站建设服务,为您倾心打造精品网站!

建站知识

设置 viewport 实现定宽网页 WebApp 下布局自适应
来源:  发布时间:2015-04-28  点击:

分类:前端技术 | 标签:viewport、定宽、自适应 | 发布时间:2014-08-01 23:13:00 | 唯一身份浏览量:2814


一般来说,我们实现布局自适应可以有以下几种方式:

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

详细的介绍,可以参考自适应网页设计(Responsive Web Design)这篇文章。

这里介绍的是如何让定宽网页在 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: 其他手机需要特殊处理的在下面 }); 

存在的问题

  • 目前只测试 android 和 ios/ipad 手机
  • android 下使用 firefox 无法检测出 android 的版本,因此只能忽略 firefox

ps: 理论上可以利用枚举的方式将通用的手机分辨率记录起来,从而达到适应所有机型的效果。

更多
上一篇:jquery live()调用不存在的解决方法
下一篇:2015年9月29日在我公司的香港空间更换ip
我们专注于,所以专业,网站设计,网站优化,网站制作与网站开发
Copyright©2010-2015 平顶山市引潮网络技术有限公司 All Rights Reserved
地址:平顶山市建设路和开源路交叉路口南,开源路路西 工商银行四楼 电话:15937565102 备案许可证编号:豫ICP备1020518号
平顶山网站开发、平顶山网站建设、平顶山网站优化、平顶山网页设计、平顶山网站改版、平顶山域名服务