专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

viewport定宽方式布局webapp切图

ins518 2024-11-20 17:00:03 技术文章 13 ℃ 0 评论

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

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

--------------------------------------------------------------------

以下摘自互联网.

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

使用流动布局（fluidgrid）

根据屏幕大小选择加载不同的CSS

使用CSS的@media规则

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

<head>

<metaname="viewport"content="width=device-width,user-scalable=no">

</head>

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

viewport元素

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

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

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

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

target-densitydpi=UI-width/device-width*window.devicePixelRatio*160;

//UI-width：WebApp布局宽度

//device-width：屏幕分辨率宽度

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

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

$(function(){

varDEFAULT_WIDTH=640,//页面的默认宽度

ua=navigator.userAgent.toLowerCase(),//根据useragent的信息获取浏览器信息

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: 理论上可以利用枚举的方式将通用的手机分辨率记录起来，从而达到适应所有机型的效果。

切图网（www.qietu.com）常年致力于web前端开发技术研究、关注用户体验，关注响应式、h5、微场景、微信、支付宝服务窗微站等开发技术，如果你对此感兴趣，加我们公众微信号：qietuwang

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表